top 2 bottm

top 2 bottom button

by Amal Das

HTML

<div class="block">
  <button>
     <span>new</span>
  </button>
</div>

CSS

.block>button {
  position:relative;
  background-color: red;
  border: 0 none;
  width: 150px;
  height: 50px;
}
.block>button>span{
  color: #fff;
  display:block;
  font-size: 16px;
  z-index:100;
  position: relative;
}
.block>button:after{
  content:"";
  position:absolute;
  left:0;  
  top:0;
  width:100%;
  height:100%;
  background-color:#ccc;
  transform: scaleY(0);
  transform-origin: left top;
  transition:transform 0.5s ease
}
.block>button:hover:after{
  transform: scaleY(1);
  transform-origin: left bottom;
}