Text Hover & Click Effects Pack (CSS/SCSS)


Author: tonkec
Views Total: 0 views
Official Page: Go to website
Last Update: May 27, 2022
License: MIT

Preview:

Text Hover & Click Effects Pack (CSS/SCSS)

Description:

Link hover and click effects are an important part of web development nowadays. They add a nice touch to any interface by providing interactivity, or just a little flare to give your website clean and color-coordinated looks.

Here is an SCSS/CSS library that provides more than 60+ pretty cool hover and click effects for any text content (like anchor links). It’s something that every developer will likely find useful, especially those who are just getting started with CSS animations and need something to build on.

See Also:

How to use it:

1. Download the package and include the following stylesheets in your document.

<!-- Hover Effects -->
<link rel="stylesheet" href="css/text_hover.min.css" />
<!-- Click Effects -->
<link rel="stylesheet" href="css/text_hover_on_click.min.css" />

2. Or import an effect of your choice into your CSS.

&@import "defaults";
@import "helpers";
@import "options";
@import "./effects/overline/overline-goes-right";
@import "./effects/overline/overline-goes-left";
@import "./effects/overline/overline-closing";
@import "./effects/overline/overline-opening";
@import "./effects/underline/underline-goes-left";
@import "./effects/underline/underline-closing";
@import "./effects/underline/underline-opening";
@import "./effects/underline/underline-goes-right";
@import "./effects/both-side/both-go-right";
@import "./effects/both-side/both-opening-horizontal";
@import "./effects/both-side/both-go-up";
@import "./effects/both-side/both-go-down";
@import "./effects/both-side/both-go-left";
@import "./effects/both-side/left-goes-up-right-goes-down";
@import "./effects/both-side/left-goes-down-right-goes-up";
@import "./effects/both-side/overline-goes-left-underline-goes-right";
@import "./effects/both-side/overline-goes-right-underline-goes-left";
@import "./effects/fill/fill-goes-up";
@import "./effects/fill/fill-goes-down";
@import "./effects/fill/fill-goes-left";
@import "./effects/fill/fill-goes-right";
@import "./effects/fill/fill-opening-horizontal";
@import "./effects/fill/fill-closing-horizontal";
@import "./effects/fill/fill-closing-vertical";
@import "./effects/fill-corners/fc-top-left";
@import "./effects/fill-corners/fc-top-right";
@import "./effects/fill-corners/fc-bottom-left";
@import "./effects/fill-corners/fc-bottom-right";
@import "./effects/corners-closing/cc-left-top";
@import "./effects/corners-closing/cc-right-top";
@import "./effects/corners-closing/cc-left-bottom";
@import "./effects/corners-closing/cc-right-bottom";
@import "./effects/corners-expanding/ce-top-right";
@import "./effects/corners-expanding/ce-top-left";
@import "./effects/corners-expanding/ce-bottom-left";
@import "./effects/corners-expanding/ce-bottom-right";
@import "./effects/side-line/left-goes-down";
@import "./effects/side-line/left-goes-up";
@import "./effects/side-line/right-goes-up";
@import "./effects/side-line/right-goes-down";
@import "./effects/linethrough/linethrough-opening";
@import "./effects/linethrough/linethrough-closing";
@import "./effects/linethrough/linethrough-goes-left";
@import "./effects/linethrough/linethrough-goes-right";
@import "./effects/double-underline/du-goes-left";
@import "./effects/double-underline/du-goes-right";
@import "./effects/double-underline/du-opening";
@import "./effects/double-underline/du-reversed-lr";
@import "./effects/double-underline/du-reversed-rl";
@import "./effects/double-linethrough/dl-goes-left";
@import "./effects/double-linethrough/dl-goes-right";
@import "./effects/double-linethrough/dl-reversed-lr";
@import "./effects/double-linethrough/dl-reversed-rl";
@import "./effects/double-linethrough/dl-opening";
@import "./effects/moves/move-down";
@import "./effects/moves/move-up";
@import "./effects/moves/move-right";
@import "./effects/moves/move-left";
@import "./effects/moves/move-vertical";
@import "./effects/moves/move-horizontal";
@import "./effects/halfline/halfline-bottom-goes-right";
@import "./effects/halfline/halfline-bottom-goes-left";
@import "./effects/halfline/halfline-top-goes-right";
@import "./effects/halfline/halfline-top-goes-left";
@import "./effects/halfline/halfline-top-left-goes-down";
@import "./effects/halfline/halfline-top-right-goes-down";
@import "./effects/halfline/halfline-bottom-right-goes-up";
@import "./effects/halfline/halfline-bottom-left-goes-up";

3. Apply a hover effect to your element.

<h1 class="text-hover text-hover-overline-goes-right">
  Your Text
</h1>

4. Apply a click effect to the element.

<h1 class="text-click text-hover-overline-goes-right">
  Your Text
</h1>

5. All available effect classes:

  • text-hover-overline-goes-right
  • text-hover-overline-goes-left
  • text-hover-overline-closing
  • text-hover-overline-opening
  • text-hover-underline-goes-left
  • text-hover-underline-closing
  • text-hover-underline-opening
  • text-hover-underline-goes-right
  • text-hover-both-go-right
  • text-hover-both-opening-horizontal
  • text-hover-both-go-up
  • text-hover-both-go-down
  • text-hover-both-go-left
  • text-hover-left-goes-up-right-goes-down
  • text-hover-left-goes-down-right-goes-up
  • text-hover-overline-goes-left-underline-goes-right
  • text-hover-overline-goes-right-underline-goes-left
  • text-hover-fill-goes-up
  • text-hover-fill-goes-down
  • text-hover-fill-goes-left
  • text-hover-fill-goes-right
  • text-hover-fill-opening-horizontal
  • text-hover-fill-closing-horizontal
  • text-hover-fill-closing-vertical
  • fill-corners/fc-top-left
  • fill-corners/fc-top-right
  • fill-corners/fc-bottom-left
  • fill-corners/fc-bottom-right
  • text-hover-cc-left-top
  • text-hover-cc-right-top
  • text-hover-cc-left-bottom
  • text-hover-cc-right-bottom
  • text-hover-ce-top-right
  • text-hover-ce-top-left
  • text-hover-ce-bottom-left
  • text-hover-ce-bottom-right
  • text-hover-left-goes-down
  • text-hover-left-goes-up
  • text-hover-right-goes-up
  • text-hover-right-goes-down
  • text-hover-linethrough-opening
  • text-hover-linethrough-closing
  • text-hover-linethrough-goes-left
  • text-hover-linethrough-goes-right
  • text-hover-du-goes-left
  • text-hover-du-goes-right
  • text-hover-du-opening
  • text-hover-du-reversed-lr
  • text-hover-du-reversed-rl
  • text-hover-text-hover-double-dl-goes-left
  • text-hover-double-dl-goes-right
  • text-hover-double-dl-reversed-lr
  • text-hover-double-dl-reversed-rl
  • text-hover-double-dl-opening
  • text-hover-move-down
  • text-hover-move-up
  • text-hover-move-right
  • text-hover-move-left
  • text-hover-move-vertical
  • text-hover-move-horizontal
  • text-hover-halfline-bottom-goes-right
  • text-hover-halfline-bottom-goes-left
  • text-hover-halfline-top-goes-right
  • text-hover-halfline-top-goes-left
  • text-hover-halfline-top-left-goes-down
  • text-hover-halfline-top-right-goes-down
  • text-hover-halfline-bottom-right-goes-up
  • text-hover-halfline-bottom-left-goes-up

See also  Create Rain & Snow Falling Effects using CSS3 - weather.css

Leave a Reply

Your email address will not be published. Required fields are marked *