htlm kód

<nav class="cl-effect-10" id="cl-effect-10"> <a data-hover="Scintilla" href="#cl-effect-10"><span>Scintilla</span></a> <a data-hover="Palimpsest" href="#cl-effect-10"><span>Palimpsest</span></a> <a data-hover="Assemblage" href="#cl-effect-10"><span>Assemblage</span></a> </nav></p>

css kód

<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-10  {

position: relative;

z-index: 1;

}

 

.cl-effect-10 a {

overflow: hidden;

margin: 0 15px;

}

 

.cl-effect-10 a span {

display: block;

padding: 10px 20px;

background: #0F0063;

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

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

transition: transform 0.3s;

}

 

.cl-effect-10 a::before {

position: absolute;

top: 0;

left: 0;

z-index: -1;

padding: 10px 20px;

width: 100%;

height: 100%;

background: #9F93E6;

color: #0F0063;

content: attr(data-hover);

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

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

transition: transform 0.3s;

-webkit-transform: translateX(-25%);

}

 

.cl-effect-10 a:hover span,

.cl-effect-10 a:focus span {

-webkit-transform: translateX(100%);

-moz-transform: translateX(100%);

transform: translateX(100%);

}

 

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

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

-webkit-transform: translateX(0%);

-moz-transform: translateX(0%);

transform: translateX(0%);

}</style>