CSS animated buttons

CSS animated buttons.markdown

CSS animated buttons

after CodyHouse example: https://www.youtube.com/watch?v=QI-_yHfRHlg

index.html

<section>
  <div class="center">
    <a class="trigger" href="#">
      <span>
        <em>Settings</em>
        <i class="ion-android-settings" aria-hidden="true"></i>
      </span>
    </a>
  </div>
  <div class="center">
    <a class="trigger" href="#">
      <span>
        <em>profile</em>
        <i class="ion-person" aria-hidden="true"></i>
      </span>
    </a>
  </div>
  <div class="center">
    <a class="trigger" href="#">
      <span>
        <em>logout</em>
        <i class="ion-log-out" aria-hidden="true"></i>
      </span>
    </a>
  </div>
</section>

style.css

*, *::after, *::before{
  box-sizing: border-box;
}

html{
  font-size: 62.5%:
}

body{ 
  font-size: 1.0rem;
  font-family: sans-serif;
  background-color: #434D53; 
  color: #000;
}

a{
  text-decoration: none;
}

/* ----------------------------
Button
------------------------------*/
section{
  width: 100%;
  height: 100vh;
  display: table;
}

section .center{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.trigger{
  position: relative;
  background: #0E8D94;
  display: inline-block;
  width: 100px;
  height: 40px;
  border-radius: 5px;
  box-shadow: 0 1px 10px rgba(0,0,0, .7), inset 0 2px 0 rgba(255,255,255, .2);
  font-family: 'Abel', sans-serif;
  text-transform: lowercase;
}

span, em, i{
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;  
}

span{
  overflow: hidden;
}

em{
  top: 0;
  line-height: 40px;
}

i{
  top: 100%;
  line-height: 40px;
  left: -30%;
  color: #FFAB07;
}

em{
  transition: left .3s;
}

i{
  transition: top .3s;
}

.trigger:hover em{
  left: 8%;
}

.trigger:hover i{
  top: 2%;
  left: -30%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />