Change Text Link Hover Effect Using CSS3

Every website has text links. Normally it’s used hover selector and change text colour which is very simple effect. I was wondering if I can add better effect so this article will share how to add cool effect using CSS3.
Table Contents
- Previous Knowledge
- Change Text Link Colour Using Transition
- Change Text Link Background Colour
- Blurred Text Link
- Glowing Text Link
- Rounded Corner Text Link
- Rainbow Colour Text Link
- Change Text Size
- Rotate Text Link
- Rolling Text Link – Web Designer Depot Style
1. Previous Knowledge
All effects that I shared in this article are used transition
property. It changes from one style to another, without using Flash animations or JavaScripts. These websites will help you to understand:
Vendor Prefixes
You’ll see a lot of similar properties using -webkit-
or -moz-
below. They are called Vendor prefixes. Vendor prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period.
- -webkit- → Google Chrome、Safari
- -moz- → Firefox
- -o- → Opera
- -ms- → Internet Explorer
There are some properties that you don’t need to add vendor prefixes anymore like border-radius
. You can check “CSS current work & how to participate“.
2. Change Text Link Colour Using Transition
Demo
CSS
a{ color: #03c; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { color: #39f; }
3. Change Text Link Background Colour
Demo
CSS
a{ color:#fff; background: #03c; text-decoration:none; padding:0 3px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { background: #39f; }
4. Blurred Text Link
You can make burred text using text-shadow
.
Demo
CSS
a{ color: #03c; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { color: transparent; text-shadow: 0 0 5px #03c; }
5. Glowing Text Link
It’s the same idea as burred text, using text-shadow
and make font colour white.
Demo
CSS
a{ color: #03c; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { color: #fff; text-shadow: -1px 1px 5px #03c, 1px -1px 5px #03c; }
6. Rounded Corner Text Link
Demo
CSS
a{ color:#fff; background: #03c; text-decoration:none; padding:0 3px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { border-radius:30px; }
7. Rainbow Colour Text Link
Using -webkit-background-clip: text;
which supports only webkit browsers.
Demo
CSS
a{ color: #03c; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f); }
8. Change Text Size
Add display: inline-block;
to a
tag because it’s an inline element.
Demo
CSS
a{ display: inline-block; color: #03c; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { -webkit-transform: scale(1.5,1.5); -moz-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); transform: scale(1.5,1.5); }
9. Rotate Text Link
Demo
CSS
a{ display: inline-block; color: #03c; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); }
10. Rolling Text Link – Web Designer Depot Style
This is the effect that Webdesigner Depot is using. It’s used span
in order to make it a block element and also used :after
and content
to show pseudo-elements etc… It looks complicated but amazing effect!
Demo
HTML
<a href="#"><span data-title="Text Link">Text Link</span></a>
CSS
a{ color: #03c; display: inline-block; overflow: hidden; vertical-align: top; -webkit-perspective: 600px; -moz-perspective: 600px; -o-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } a span{ display: block; position: relative; padding: 0 2px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } a:hover span { background: #03c; -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -o-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg ); } a span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 0 2px; color: #fff; background: #03c; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -o-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); }
How easy to add cool effect using CSS3!