Text Hover & Click Effects Pack (CSS/SCSS)

Preview:

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:

• A Collection Of Cool Button Hover Effects – btns.css
• 60+ Image Hover Effect With Pure CSS – imagehover.css
• Creating Hover Effects with CSS3 Animations – hover.css
• SCSS Mixin Library For Cool Link Hover Effects

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