Easy Bootstrap Button Animaitons

Improve Bootstraps Buttons with CSS3 Animations

This is a quick and simple bit of styling I typically add to my bootstrap projects. Especially since most are not a flat theme, this helps the buttons standout and appear interactive.

The following styles can be added to a bootstrap project to improve their UI.

Note Requires bootstrap

/* I typically add these styles to bootstrap projects */
.btn{
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
  transition(all 0.25s, background-color 0s);
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2);
  /* on hover lift button and expand drop shadow */
  &:hover {
      transform: translate(-1px, -2px);
      box-shadow: 5px 5px 9px 0px rgba(0,0,0,.2);
  }
  &:active {
    /* when clicked lower button and eliminate dropshadow */
      transition(all, 0s);
      transform: translate(1px, 2px);
      box-shadow: none;
  }
}