html kód

<nav class="cl-effect-20" id="cl-effect-20">

<a href="#cl-effect-20"><span data-hover="Beleaguer">Beleaguer</span></a>

<a href="#cl-effect-20"><span data-hover="Scintilla">Scintilla</span></a>

<a href="#cl-effect-20"><span data-hover="Chatoyant">Chatoyant</span></a>

<a href="#cl-effect-20"><span data-hover="Palimpsest">Palimpsest</span></a>

<a href="#cl-effect-20"><span data-hover="Languor">Languor</span></a>

</nav>

<style type="text/css">

nav a {

position: relative;

display: inline-block;

margin: 5px 5px;

outline: none;

color: #9F93E6;

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-20 a {

line-height: 2em;

-webkit-perspective: 800px;

-moz-perspective: 800px;

perspective: 800px;

}

 

.cl-effect-20 a span {

position: relative;

display: inline-block;

padding: 3px 15px 0;

background: #587285;

box-shadow: inset 0 3px #2f4351;

-webkit-transition: background 0.6s;

-moz-transition: background 0.6s;

transition: background 0.6s;

-webkit-transform-origin: 50% 0;

-moz-transform-origin: 50% 0;

transform-origin: 50% 0;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform-origin: 0% 50%;

-moz-transform-origin: 0% 50%;

transform-origin: 0% 50%;

}

 

.cl-effect-20 a span::before {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #eee;

color: #2f4351;

content: attr(data-hover);

-webkit-transform: rotateX(270deg);

-moz-transform: rotateX(270deg);

transform: rotateX(270deg);

-webkit-transition: -webkit-transform 0.6s;

-moz-transition: -moz-transform 0.6s;

transition: transform 0.6s;

-webkit-transform-origin: 0 0;

-moz-transform-origin: 0 0;

transform-origin: 0 0;

pointer-events: none;

}

 

.cl-effect-20 a:hover span,

.cl-effect-20 a:focus span {

background: #2f4351;

}

 

.cl-effect-20 a:hover span::before,

.cl-effect-20 a:focus span::before {

-webkit-transform: rotateX(10deg);

-moz-transform: rotateX(10deg);

transform: rotateX(10deg);

} </style>