Inset Shadow Buttons Hover Effects

Inset Shadow Buttons Hover Effects

by rajnishw3

HTML

<button class="read_more_button">Explore</button>
<button class="touch-anchor">Contact us</button>

CSS

button{
	width: 150px;
	color: #000;
  border: 1px solid #592903;
  border-radius: 25px;
  padding: 7px;
	transition: all .5s ease;
}
/* read more button css */
.read_more_button{
  position: relative;
  box-shadow: inset 0 0 0 0 #fc9908;
}
.read_more_button:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 29px;
  transition: .3s linear;
  z-index: 0;
}
.read_more_button:hover{
  color: #fff;
  box-shadow: inset 200px 0 0 0 #fc9908;
	transition: all .5s linear;
}
.read_more_button:hover:after{
  height: calc(100% + 18px);
  width: calc(100% + 18px);
  left: -9px;
  top: -9px;
  background: rgba(0,0,0,0.3);
}

/* touch anchor css */
.touch-anchor {
	box-shadow: inset 0 0 0 0 rgba(0,0,0,0.3);
}
.touch-anchor:hover {
	box-shadow: inset 0 100px 0 0 rgba(0,0,0,0.3);
	transition: all .5s ease;
	color: #fff;
	border: 1px solid #000;
}