<html >
<head>
  <meta charset="UTF-8">
  <title>Awesome Gradient Buttons (CSS-only)</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1> Awesome Gradient Buttons</h1>
  <div class="container">
  <a class="grdbtn btn1">Let's Go <i class="fa fa-arrow-right" aria-hidden="true"></i> </a>
  <a class="grdbtn btn2">Launch Me <i class="fa fa-rocket" aria-hidden="true"></i></a>
  <a class="grdbtn btn3">Send <i class="fa fa-envelope-o" aria-hidden="true"></i></a> 
  <a class="grdbtn btn4">Buy Me <i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
    
</div>
  <div class="credits"
    <a href="https://mudasirali.com">© Mudasir Ali</a>
  </div>
    <script  src="js/index.js"></script>

</body>
</html>

body{
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  height: -webkit-fill-available;
  background-image: linear-gradient(-225deg, #B6CEE8 0%, #F578DC 100%);
}
h1
{
  display: block;
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-size: 40px;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 50vw;
  margin: 0 auto;
  min-height: 50vh;
}
.grdbtn {
  height: 20px;
  flex: 1 1 auto;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  border: 2px solid white;
 }

.grdbtn:hover {
  background-position: right center;
}

.btn1 {
  background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn2 {
  background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}

.btn3 {
  background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}

.btn4 {
  background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
}
.credits {
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  color: white;
}

//We can survive without JS.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.