Post
Ask Question

Pure CSS Link Effects using HTML

Pure CSS Link Effects using HTML 

 
In this post, written by me, we're going to create more than 21+ subtle and modern link effects (sliding, flipping, 3D rotation, etc.) using CSS3 transitions on pseudo-elements.
 

How to use it?

 
1. Create the html
  1. <nav class="cl-effect-1" id="cl-effect-1">  
  2.     <a href="#cl-effect-1">Link 1</a>  
  3.     <a href="#cl-effect-1">Link 2</a>  
  4.     <a href="#cl-effect-1">Link 3</a>  
  5. ...  
  6. </nav>  
2. The CSS
  1. nav a {  
  2.   position: relative;  
  3.   display: inline-block;  
  4.   margin: 15px 25px;  
  5.   outline: none;  
  6.   color: #fff;  
  7.   text-decoration: none;  
  8.   text-transform: uppercase;  
  9.   letter-spacing: 1px;  
  10.   font-weight: 400;  
  11.   text-shadow: 0 0 1px rgba(255,255,255,0.3);  
  12.   font-size: 1.35em;  
  13. }  
  14. nav a:hover, nav a:focus {  
  15.   outline: none;  
  16. }  
  17. .cl-effect-1 a::before, .cl-effect-1 a::after {  
  18.   display: inline-block;  
  19.   opacity: 0;  
  20.   -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;  
  21.   -moz-transition: -moz-transform 0.3s, opacity 0.2s;  
  22.   transition: transform 0.3s, opacity 0.2s;  
  23. }  
  24. .cl-effect-1 a::before {  
  25.   margin-right: 10px;  
  26.   content: '[';  
  27.   -webkit-transform: translateX(20px);  
  28.   -moz-transform: translateX(20px);  
  29.   transform: translateX(20px);  
  30. }  
  31. .cl-effect-1 a::after {  
  32.   margin-left: 10px;  
  33.   content: ']';  
  34.   -webkit-transform: translateX(-20px);  
  35.   -moz-transform: translateX(-20px);  
  36.   transform: translateX(-20px);  
  37. }  
  38. .cl-effect-1 a:hover::before, .cl-effect-1 a:hover::after, .cl-effect-1 a:focus::before, .cl-effect-1 a:focus::after {  
  39.   opacity: 1;  
  40.   -webkit-transform: translateX(0px);  
  41.   -moz-transform: translateX(0px);  
  42.   transform: translateX(0px);  
  43. }  
Menu Style 1
 
d
 
Menu Style 2
 
s
 
Menu Style 3
 
a