A simple animated navigation implemented in pure css3 code_html/css_WEB-ITnose

I have introduced many navigation menus to you before, and today I will share with you a simple animated navigation implemented in pure CSS3 code. When the mouse passes over it, the background color changes from a diamond to a rectangle. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

  <div align="center" style="background-color: #ee1d27; padding: 20px;">        <div class="contener_link">            <div class="link_txt">                MENU ONE</div>        </div>        <div class="contener_link">            <div class="link_txt">                MENU TWO</div>        </div>        <div class="contener_link">            <div class="link_txt">                MENU THREE</div>        </div>    </div>

css3 code:

   .contener_link{  text-align: center;  position: relative;  width: 170px;  height: 50px;  cursor: pointer;  display: inline-block;}.contener_link .link_txt{  font-family:'Roboto';  position: absolute;  width: 150px;  font-weight: 300;  text-decoration: none;  font-size:22px;  padding: 10px;  color: #ffffff;}.contener_link:hover{  background-color: #f8b334;  -webkit-animation-duration:1s;  -webkit-animation-name: diaganim;  -moz-animation-duration:1s;  -moz-animation-name: diaganim;  -ms-animation-duration:1s;  -ms-animation-name: diaganim;  animation-duration:1s;  animation-name: diaganim;}@-webkit-keyframes diaganim {  0% {-webkit-transform: skewX(-80deg);}  100% {-webkit-transform: skewX(0deg);}}@-moz-keyframes diaganim {  0% {-moz-transform: skewX(-80deg);}  100% {-moz-transform: skewX(0deg);}}@-ms-keyframes diaganim {  0% {-ms-transform: skewX(-80deg);}  100% {-ms-transform: skewX(0deg);}}@keyframes diaganim {  0% {transform: skewX(-80deg);}  100% {transform: skewX(0deg);}}