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
<nav class="cl-effect-1" id="cl-effect-1">
<a href="#cl-effect-1">Link 1</a>
<a href="#cl-effect-1">Link 2</a>
<a href="#cl-effect-1">Link 3</a>
...
</nav>
2. The CSS
nav a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
nav a:hover, nav a:focus {
outline: none;
}
/* Effect 1: Brackets */
.cl-effect-1 a::before, .cl-effect-1 a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.cl-effect-1 a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.cl-effect-1 a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.cl-effect-1 a:hover::before, .cl-effect-1 a:hover::after, .cl-effect-1 a:focus::before, .cl-effect-1 a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
Menu Style 1
![]()
Menu Style 2
![]()
Menu Style 3