Best 2 Button Design and Animation

Here is some button design that we selected for you to choose. Every code that used in this button designs are free and loaded on code pen.

1. Great Hover Animation


CodePen Link: Click Here
Author: Valentin Galmand

HTML: 

< section class="container" >
  <button data-hover="click me!"><div>Hover me!</div></button>
</section>

CSS: 


@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,800);

*, *:before, *:after{
  box-sizing: border-box;
  padding: 0; margin: 0;
  font: 300 1em/1.5 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  text-decoration: none;
  color: #111;
}

html, body{background: rgb(236, 240, 241);}

  section.container{
    min-width: 500px;
    margin: 10% auto;
    text-align: center;
  }
    a:hover{border-bottom: 1px solid #111;} 
    h1{font-size: 2em; padding: 20px 0;}
    p{
      font-size: .75em;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 20px 0;
    }

    button:hover{cursor: pointer}
    button {
      background: transparent; outline: none;
      position: relative;
      border: 2px solid #111;
      padding: 15px 50px;
      overflow: hidden;
    }

    /*button:before (attr data-hover)*/
    button:hover:before{opacity: 1; transform: translate(0,0);}
    button:before{
      content: attr(data-hover);
      position: absolute;
      top: 1.1em; left: 0;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 3px;
      font-weight: 800;
      font-size: .8em;
      opacity: 0;
      transform: translate(-100%,0);
      transition: all .3s ease-in-out;
    }
      /*button div (button text before hover)*/
      button:hover div{opacity: 0; transform: translate(100%,0)}
      button div{
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 800;
        font-size: .8em;
        transition: all .3s ease-in-out;
      }



2. Slide Text On Hover Animation



CodePen Link: Click Here
Author: Mads Hakansson

HTML: 

< section class="container" >
  <section class="container">
  	<button data-hover="click me!"><div>Hover me!</div></button>
  </section>

CSS: 


@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,800);

*, *:before, *:after{
  box-sizing: border-box;
  padding: 0; margin: 0;
  font: 300 1em/1.5 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  text-decoration: none;
  color: #111;
}

html, body{background: rgb(236, 240, 241);}

  section.container{
    min-width: 500px;
    margin: 10% auto;
    text-align: center;
  }
    a:hover{border-bottom: 1px solid #111;} 
    h1{font-size: 2em; padding: 20px 0;}
    p{
      font-size: .75em;
      text-transform: uppercase;
      letter-spacing: 2px;
      padding: 20px 0;
    }

    button:hover{cursor: pointer}
    button {
      background: transparent; outline: none;
      position: relative;
      border: 2px solid #111;
      padding: 15px 50px;
      overflow: hidden;
    }

    /*button:before (attr data-hover)*/
    button:hover:before{opacity: 1; transform: translate(0,0);}
    button:before{
      content: attr(data-hover);
      position: absolute;
      top: 1.1em; left: 0;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 3px;
      font-weight: 800;
      font-size: .8em;
      opacity: 0;
      transform: translate(-100%,0);
      transition: all .3s ease-in-out;
    }
      /*button div (button text before hover)*/
      button:hover div{opacity: 0; transform: translate(100%,0)}
      button div{
        text-transform: uppercase;
        letter-spacing: 3px;
        font-weight: 800;
        font-size: .8em;
        transition: all .3s ease-in-out;
      }




Post a Comment

Previous Post Next Post