.box.shadow
  .circle
  
.box.shadow
  .circle
  
.box.shadow
  .circle

@import url('https://fonts.googleapis.com/css?family=PT+Mono')

html
  box-sizing: border-box
  font: 18px PT Mono
  background: antiquewhite
  
*,
*::before,
*::after
  box-sizing: inherit

body
  display: flex
  align-items: center
  justify-content: center
  flex-direction: column
  width: 100%
  height: 100vh

.box
  width: 50%
  min-width: 250px
  display: block
  height: 50px
  position: relative
  border-radius: 5px
  background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%)
  margin-bottom: 40px
  padding: 15px 25px 0 40px
  color: darkslategray
  box-shadow: 1px 2px 1px -1px #777
  transition: background 200ms ease-in-out
  
.shadow
  position: relative
  &:before
    z-index: -1
    position: absolute
    content: ""
    bottom: 13px
    right: 7px
    width: 25%
    top: 0
    box-shadow: 0 15px 10px #777
    transform: rotate(4deg)
    transition: all 150ms ease-in-out

.box:hover
  background: linear-gradient(to right, #abbd73 0%, #abbd73 100%)
.shadow:hover::before
  transform: rotate(0deg)
  bottom: 20px
  z-index: -10

.circle
  position: absolute
  top: 14px
  left: 15px
  border-radius: 50%
  box-shadow: inset 1px 1px 1px 0px rgba( 0, 0, 0, .5), inset 0 0 0 25px antiquewhite
  width: 20px
  height: 20px
  display: inline-block