<button class="button1">I'm a button</button>
<button class="button2">I'm a button</button>
<button class="button3">I'm a button</button>
<button class="button4">I'm a button</button>

// Button 1
@colour1: #7b81ec;
@colour2: #3bd1d3;

// Button 2
@colour3: #fa80d2;
@colour4: #fed757;

// Button 3
@colour5: #8ce0f1;
@colour6: #79f391;

// Button 4
@colour7: #525a69;
@colour8: #898dda;

button {
  margin: 2em auto;
  display: block;
  -webkit-appearance: none;
  border: 6px solid rgba(255,255,255,0.45);
  border-radius: 50px;
  padding: 1em 3em;
  background-repeat: no-repeat;
  background-size: 100%;
  background-clip: padding-box;
  position: relative;
  color: #FFF;
}
button:before {
  content: "";
  width: 100%;
  height:100%;
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 50px;
  z-index: -1;
  filter: blur(14px);
}
button:after {
  content: "";
  width: 100%;
  height:100%;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 50px;
  z-index: -1;
  filter: blur(14px);
}

.button1 {
  background-image: linear-gradient(90deg, @colour1, @colour2);
}
.button1:before {
  background-image: linear-gradient(90deg, @colour1, transparent);
}
.button1:after {
  background-image: linear-gradient(90deg, transparent, @colour2);
}


.button2 {
  background-image: linear-gradient(90deg, @colour3, @colour4);
}
.button2:before {
  background-image: linear-gradient(90deg, @colour3, transparent);
}
.button2:after {
  background-image: linear-gradient(90deg, transparent, @colour4);
}

.button3 {
  background-image: linear-gradient(90deg, @colour5, @colour6);
}
.button3:before {
  background-image: linear-gradient(90deg, @colour5, transparent);
}
.button3:after {
  background-image: linear-gradient(90deg, transparent, @colour6);
}

.button4 {
  background-image: linear-gradient(90deg, @colour7, @colour8);
}
.button4:before {
  background-image: linear-gradient(90deg, @colour7, transparent);
}
.button4:after {
  background-image: linear-gradient(90deg, transparent, @colour8);
}