<nav class="cl-effect-8" id="cl-effect-8"> <a href="#cl-effect-8">Imbue</a> <a href="#cl-effect-8">Sumptuous</a> <a href="#cl-effect-8">Scintilla</a> </nav>

css k�d:

<style type="text/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;

}

.cl-effect-8 a {

padding: 10px 20px;

}

 

.cl-effect-8 a::before,

.cl-effect-8 a::after  {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border: 3px solid #FF96F1;

content: '';

-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

-moz-transition: -moz-transform 0.3s, opacity 0.3s;

transition: transform 0.3s, opacity 0.3s;

}

 

.cl-effect-8 a::after  {

border-color: #A3D0FF;

opacity: 0;

-webkit-transform: translateY(-7px) translateX(6px);

-moz-transform: translateY(-7px) translateX(6px);

transform: translateY(-7px) translateX(6px);

}

 

.cl-effect-8 a:hover::before,

.cl-effect-8 a:focus::before {

opacity: 0;

-webkit-transform: translateY(5px) translateX(-5px);

-moz-transform: translateY(5px) translateX(-5px);

transform: translateY(5px) translateX(-5px);

}

 

.cl-effect-8 a:hover::after,

.cl-effect-8 a:focus::after  {

opacity: 1;

-webkit-transform: translateY(0px) translateX(0px);

-moz-transform: translateY(0px) translateX(0px);

transform: translateY(0px) translateX(0px);

} </style>