css: button

 

.trapdoor {
  -webkit-transform: translateZ(0px);
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -25px;
  width: 200px;
  height: 50px;
  box-shadow: inset -7px 0px 12px -8px rgba(0,0,0,0.3), inset 7px 0px 12px -8px rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.3);
  -webkit-transition: background 400ms ease-in-out;
  -moz-transition: background 400ms ease-in-out;
  -ms-transition: background 400ms ease-in-out;
  -o-transition: background 400ms ease-in-out;
  transition: background 400ms ease-in-out;
  
  &:hover {
    background: #fff;
    
    .door {
       box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.4);
       -webkit-transform: scale(1.08);
       -moz-transform: scale(1.08);
       -ms-transform: scale(1.08);
       -o-transform: scale(1.08);
       transform: scale(1.08);
    }

　　

 

 

input[type="button"],
input[type="submit"],
	button,
	.button {
	border-radius: 15px 15px 15px 15px;
	background: #f3e8e6; /* Old browsers */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e8e6), color-stop(100%,#f3e8e6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f3e8e6 0%,#f3e8e6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f3e8e6 0%,#f3e8e6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f3e8e6 0%,#f3e8e6 100%); /* IE10+ */
	background: linear-gradient(top,  #f3e8e6 0%,#f3e8e6 100%); /* W3C */
    color: #ffffff;
	text-shadow: 1px 1px 1px rgba(255,255,255, .22);
}

　

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; / Safari 4+ /
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; / Fx 5+ /
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; / Opera 12+ /
  animation:         NAME-YOUR-ANIMATION 5s infinite; / IE 10+, Fx 29+ /
}