How to create button hover animation

      No Comments on How to create button hover animation

How to create button hover animation – CSS animations to animate the :before pseudo class contents

See the Pen How to create button hover animation -CSS animating :before by scanfcode (@scanfcode) on CodePen.

How to create button hover animation

HTML

<div class="animate1">
<button class="btn-animate10">VIEW MORE</button>
</div>

<div class="animate1">
<button class="btn-animate11">VIEW MORE</button>
</div>

CSS


/* container class */
.animate1
{
  padding:4%;font-family: 'Raleway', Arial, sans-serif;
}

/* button 1 style */
.btn-animate10
{
  color:#993366;
  border-radius:5px;
  background-color:transparent;
  border:solid 1px #993366;position:relative;
}

/* describing the before content for button 1*/
.btn-animate10:before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:0px;
    background:#993366;  
    transition-property:width;  //animating width
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    transform-origin: 0 50%;
    z-index:-1;
}
.btn-animate10:hover
{
    color: white;background:transparent;
}

/* animation width to 100% on hover for :before */
.btn-animate10:hover::before
{
      width:100%;
      transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
 }

/* style for button 2 */
.btn-animate11
{
  color:#5900b3;
  border-radius:5px;
  background-color:transparent;
  border:solid 1px #5900b3;
  position:relative;
}

/* :before style */
.btn-animate11:before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height:0px;
    background:#5900b3;
    transition-property:height;  //animating heigth
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    transform-origin: 0 50%;z-index:-1;
  }
.btn-animate11:hover
{
    color:white;background:transparent;
}

/* animating height to 100%; */
.btn-animate11:hover::before 
{
      height:100%;
      transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
}

Leave a Reply

Your email address will not be published. Required fields are marked *