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