logo

Animation Bouton Hover

HTML:

  1.   <div class="buttons is-centered">
  2.     <a href="#" class="btnStyle">
  3.       <span class="btnBlack"></span>
  4.       <span class="btnTxt">TEST</span>
  5.     </a>
  6.   </div>
CSS:
  1. .btnStyle{
  2.   position: relative;
  3.   z-index: 0;
  4.   background-color: red;
  5.   padding: 14px 78px;
  6.   overflow: hidden;
  7.   display: inline-block;
  8.   vertical-align: middle;
  9.   width: auto;
  10.   font-size: 13px;
  11.   line-height: 2em;
  12.   font-weight: 600;
  13.   text-transform: uppercase;
  14.   box-sizing: border-box;
  15.   margin: 0;
  16.   outline: 0;
  17.   border-radius: 5px;
  18.   cursor: pointer;
  19. }
  20.  
  21. .btnBlack{
  22.   background-color: #1d1d1d;
  23.   position: absolute;
  24.   bottom: 0;
  25.   left: 0;
  26.   width: 100%;
  27.   height: 0;
  28.   border-radius: 0;
  29.   transition: height .4s ease;
  30. }
  31.  
  32. .btnStyle:hover .btnBlack{
  33.   height: 100%;
  34.   transition: height .4s ease;
  35. }
  36.  
  37. .btnTxt{
  38.   position: relative;
  39.   display: inline-block;
  40.   color: white;
  41. }
  42.  
  43. .btnTxt:before{
  44.   content: "";
  45.   width: 4px;
  46.   height: 4px;
  47.   border-radius: 100%;
  48.   background-color: white;
  49.   color: white;
  50.   position: absolute;
  51.   left: -10px;
  52.   top: 11px;
  53.   opacity: 1;
  54.   transition: transform .5s ease .1s,opacity .5s ease;
  55. }
  56.  
  57. .btnTxt:after{
  58.   content: "";
  59.   width: 4px;
  60.   height: 4px;
  61.   border-radius: 100%;
  62.   background-color: white;
  63.   color: white;
  64.   position: absolute;
  65.   right: -10px;
  66.   top: 11px;
  67.   opacity: 1;
  68.   transition: transform .5s ease .1s,opacity .5s ease;
  69. }
  70.  
  71. .btnStyle:hover .btnTxt:before{
  72.   transform: translateX(-100px);
  73.   opacity: 0;
  74.   transition: transform, .8s ease, opacity .5s ease;
  75. }
  76.  
  77. .btnStyle:hover .btnTxt:after{
  78.   transform: translateX(100px);
  79.   opacity: 0;
  80.   transition: transform, .8s ease, opacity .5s ease;
  81. }