Izvēlne gaiši zilā tonī ar animācijas efektu

by Antikrists

HTML

<ul class="zornet_ru"> 
  
  <li><a href="/">Saturs 1</a></li> 
  <li><a href="/">Saturs 2</a></li> 
  <li><a href="/">Saturs 3</a></li> 
  <li><a href="/">Saturs 4</a></li> 
 
</ul>

CSS

ul.zornet_ru {-webkit-margin-before: 0;-webkit-margin-after: 0;-webkit-padding-start: 0;padding: 0px;} 
ul.zornet_ru li {list-style: none;} 
ul.zornet_ru li a {text-decoration: none;background-color: #fff;display: block;font-size: 15px;margin-bottom: 3px;border-left: solid 5px #4766b9;padding: 12px 0 12px 15px;color: #ffffff;background-size: 200.22% auto;-webkit-background-size: 200.22% auto;-moz-background-size: 200.22% auto;background-position: -0 0;background-image: linear-gradient(to right,rgb(1, 1, 8) 20%,rgb(69, 142, 195) 50%);transition: background-position .5s ease-out;-webkit-transition: background-position .5s ease-out;width: 250px;} 
ul.zornet_ru li a:hover {background-position: -99.99% 0;color: #fff;text-shadow: 0 1px 0 #171616;}