Colour Label Tabs Hover in CSS for Free

Here we are providing Colorful Name Tab Hover using HTML and CSS code, Where ever you want this Label Tab place or paste the HTML Code, and CSS code in Blogger CSS panel. 

 Demo

Follow the HTML and CSS codes below :

HTML Code : 

<li style="-webkit-animation-delay:.1s" class="tomato"></li>
<li style="-webkit-animation-delay:.2s" class="peachpuff"></li>
<li style="-webkit-animation-delay:.3s" class="coral"></li>
<li style="-webkit-animation-delay:.4s"class="cornflowerblue"></li>
<li style="-webkit-animation-delay:.5s" class="peru"></li>
<li style="-webkit-animation-delay:.6s" class="snow"></li>
<li style="-webkit-animation-delay:.7s" class="chocolate"></li>
<li style="-webkit-animation-delay:.8s" class="papayawhip"></li>
<li style="-webkit-animation-delay:.9s" class="salmon"></li>
<li style="-webkit-animation-delay:1s" class="khaki"></li>
<li style="-webkit-animation-delay:1.1s" class="thistle"></li>
<li style="-webkit-animation-delay:1.2s" class="firebrick"></li>
<li style="-webkit-animation-delay:1.3s" class="dodgerblue"></li>
<li style="-webkit-animation-delay:1.4s" class="cadetblue"></li>  

CSS Code : 

@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);

* { box-sizing:border-box; }

body {
  display:flex;
  background:#000;
  flex-wrap:wrap;
  margin:20px;
  overflow-x:hidden;
}


body:hover li { opacity:.5; -webkit-filter:grayscale(.8); }
body:hover li:hover { opacity:1.5; -webkit-filter:grayscale(0); }

li {
  flex:1 0 auto;
  position:relative;
  transition:.3s;
  padding:0 30px;
  list-style:none;
  font-size:4.5em;
  font:700 5.5vw/1.5 'Amatic SC', cursive;
  text-align:center;
  margin:5px;
  border-radius:10px;
  animation:flyin .5s ease both;
}

@keyframes flyin {
  0%{ transform:translate(50px,110px) rotate(35deg); opacity:0; }
  100%{ transform:none; opacity:1; }
}

li:before { content:attr(class); color:#000; }

.cadetblue { background:cadetblue; }
.chocolate { background:chocolate; }
.coral { background:coral; }
.cornflowerblue { background:cornflowerblue; }
.dodgerblue { background:dodgerblue; }
.firebrick { background:firebrick; }
.khaki { background:khaki; }
.lawngreen { background:lawngreen; }
.papayawhip { background:papayawhip; }
.peachpuff { background:peachpuff; }
.peru { background:peru; }
.peru { background:peru; }
.salmon { background:salmon; }
.snow { background:snow; }
.thistle { background:thistle; }
.tomato { background:tomato; }