css animations

<!DOCTYPE html>
<html>

  <head>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="bootstrap-js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <button class="btn button--normal">
        Click me
      </button> 
      <hr>
      <div class=well>
        <span class="glyphicon glyphicon-remove"></span>
      </div>
      <hr>
      <div class="btn--normal-2">
       <span class="btn__content btn__content--top">
         Click me
       </span>
       <span class="btn__content btn__content--bottom">
         I'm famous 
       </span>
      </div> 
      <hr>
    </div>
  </body>

</html>

// Code goes here

/* first button */

.container {
  margin: 50px;
}

.button--normal {
  background-color: #9999ff;
  border: solid 1px;
  color: white;
  transition: 0.6s;
}
.button--normal:hover {
  background-color: white;
  color: #9999ff;
}

/* remove */
.glyphicon-remove {
  float: right;
  cursor: pointer;
  top: -10px;
  transition: transform 0.2s ease-out;
}

.glyphicon-remove:hover {
  transform: rotate(360deg);
}

/* second button */

.btn--normal-2 {
  position: relative;
  background-color: #9999ff;
  width: 100px;
  height: 40px;
  overflow: hidden;
  color: white;
  border-radius: 4px;
}

.btn__content {
  position: absolute;
  width: 100px;
  text-align: center;
  line-height: 40px;
  -webkit-transition: top 0.2s;
  -moz-transition: top 0.2s;
  -ms-transition: top 0.2s;
  -o-transition: top 0.2s;
  transition: top 0.2s;
}

.btn__content--top {
  top: 0;
}

.btn__content--bottom {
  top:100px;
}

.btn--normal-2:hover .btn__content--top {
  top: -100px;
}

.btn--normal-2:hover .btn__content--bottom {
  top: 0px;
}

CSS animations