.button This is a button

body
  //background-image: url('https://wallpaperbrowse.com/media/images/Background-4.jpg')
  background-size: cover
  text-align: center
  padding: 200px

//There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it
body::after 
  content: ""
  background: url(https://wallpaperbrowse.com/media/images/Background-4.jpg)
  opacity: 0.7
  top: 0
  left: 0
  bottom: 0
  right: 0
  position: absolute
  z-index: -1
  
.button
  display: inline-block
  background: transparent
  color: #fff
  font-weight: bold
  text-transform: uppercase
  padding: 20px 30px
  border: 3px solid #fff
  border-radius: 5px
  box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4)
  cursor: pointer
  transition: all ease-in-out 300ms
  
  &:hover
    background-color: #4285f4
    box-shadow: 0px 37px 20px -20px rgba(0,0,0,0.2)
    transform: translate(0px, -5px) scale(1.1)