JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='button'>
  <div class='blur'>
  
  </div>
  <div class='frost'>
    
  </div>
  <div class='text'>
    <span>
      Water
    </span>
  </div>
</div>

<div class='button'>
  <div class='blur'>
  
  </div>
  <div class='frost'>
    
  </div>
  <div class='text'>
    <span>
      Water
    </span>
  </div>
</div>

<div class='gradient-button'>

</div>

CSS

.button {
  position: relative;
  display: inline-block;
  min-width: 300px;
  min-height: 100px;
  background: url(http://www.dmtech-id.com/wp-content/uploads/2016/03/water-bg-1.jpg);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  margin: 10px;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: url(http://www.dmtech-id.com/wp-content/uploads/2016/03/water-bg-1.jpg);
  background-size: 200% auto;
  background-position: center;
  border-radius: inherit;
  filter: blur(20px);
}

.frost {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(242, 246, 247, 0.7), rgba(242, 246, 247, 0.7), transparent);
  border-radius: inherit;
  z-index: 10;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  font-family: sans-serif;
  color: #1C1E1F;
  letter-spacing: 2px;
  font-weight: 100;
  z-index: 20;
}


.gradient-button {
  position: relative;
  display: inline-block;
  min-width: 300px;
  min-height: 100px;
  background: -webkit-linear-gradient(left, #F0F5F7, #DAE1E3);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  margin: 10px;
}