btn-css2.css

// アイコンがプルプル
.tremble{
  color: #ffffff;
  text-shadow: 0 1px 1px #C94528;
  display: inline-block;
  text-align: center;
  background: linear-gradient(to bottom, #ffd8d8 0%, #db6d6d 100%);
  box-shadow: 0 1px 1px #C94528;
  border-radius: 10px;
  padding: 15px 25px;
  transition: .3s;
}
.tremble:hover i{
  animation: poyopoyo 1.5s;
}
.tremble:active{
  background: linear-gradient(to bottom, #db6d6d 0%,#db6d6d 100%);
  transform: translate(0,2px);
  box-shadow: 0 1px #C94528;
}
@keyframes poyopoyo {
  0% {transform: translate(0px, 0px) rotate(0deg)}
  15% {transform: translate(2px, 2px) rotate(15deg) scale(1.6,1.4)}
  35% {transform: translate(0px, 2px) rotate(0deg) }
  40% {transform: translate(2px, 0px) rotate(-10deg) scale(.9,.8)}
  47% {transform: translate(0px, 2px) rotate(0deg) scale(1,1)}
  60% {transform: translate(2px, 0px) rotate(5deg) scale(.95,.9)}
  70% {transform: translate(0px, 0px) rotate(0deg)}
}
// マウスオーバーしたらtext-shadowで鮮やかに
.rainbow{
  background: transparent;
  color:#333 ;
  position: relative;
  padding: 15px 25px;
  display: inline-block;
  text-align: center;
  transition: .3s;
  letter-spacing: .2em;
  border: 1px solid #333;
}
.rainbow:hover{
  padding:8px 25px 22px 25px;
  text-shadow:0 7px rgb(76, 255, 53),0 15px rgb(252, 231, 43)
}
.rainbow:active{
  color: rgb(76, 255, 53);
  background: #333;
  padding:15px 25px 15px 25px;
  text-shadow:none;
}
// マウスオーバーで波紋
.hamon{
  border-radius: 10px;
  color:#fff;
  background: rgb(3, 63, 112);
  position: relative;
  padding: 30px 40px;
  display: inline-block;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.hamon::before,
.hamon::after{
  position: absolute;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transform: scale(0,0);
}
.hamon:active{
  opacity: .7;
}
.hamon:hover::before{
  animation: hamon 2s infinite;
}
.hamon:hover::after{
  animation: hamon 2s .3s infinite;
}
@keyframes hamon {
  0%   {  transform: scale(0,0);}
  100% {  transform: scale(50,50);opacity: 0;}
}