Эффекты CSS для кнопок

#button4 {

  background: #2FA30F;

  color: white;

  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);

  font-size: 22px;

  height: 58px;

  width: 155px;

  margin: 50px 50px;

   padding: 7px 7px;

  overflow: hidden;

  display: block;

  text-align: center;

  line-height: 58px;

  /*Скругленные углы*/

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

  /*Тень*/

  -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);

  -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);

  box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8);

  /*Градиент*/

  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.2));

  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.2));

  background-image: -o-linear-gradient(top, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.2));

  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.2));

  background-image: linear-gradient(top, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.2));

}

#button4:hover {

  margin-top: 58px;

  /*Тень*/

  -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);

  -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);

  box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);

  /*Градиент*/

  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.4));

  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.4));

  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.4));

  background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.4));

  background-image: linear-gradient(bottom, rgba(0, 0, 0, ), rgba(0, 0, 0, 0.4));

}