<div class="container text-center">
  <div class="row mt-5">
    <div class="col-sm-12">
      <h2 class="mb-0 mt-3 fancy">
        Modern Gradient Buttons</h2>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-12">
      <h5 class="mb-4 font-weight-light">No Animation</h5>
      <button class="gb gb-bordered" id="gb1">Button 1</button>
      <button class="gb gb-bordered gb-rounded" id="gb2">Button 2</button>
      <button class="gb" id="gb3">Button 3</button>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-12">
      <h5 class="mb-4 font-weight-light">Background Fill Animation</h5>
      <button class="gb gb-bordered hover-fill" id="gb4">Button 4</button>
      <button class="gb gb-bordered hover-fill gb-rounded" id="gb5">Button 5</button>
      <button class="gb gb-bordered hover-fill reverse" id="gb6">Button 6</button>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-12">
      <h5 class="mb-4 font-weight-light">Background Slide Animation</h5>
      <button class="gb gb-bordered hover-slide" id="gb7">Button 7</button>
      <button class="gb gb-bordered hover-slide gb-rounded" id="gb8">Button 8</button>
      <button class="gb gb-bordered hover-slide" id="gb9">Button 9</button>
    </div>
  </div>
  <div class="row mt-5">
    <div class="col-sm-12">
      <h5 class="mb-4 font-weight-light">Background Slide and Fill</h5>
      <button class="gb gb-bordered hover-slide hover-fill" id="gb10">Button 10</button>
      <button class="gb gb-bordered hover-slide hover-fill gb-rounded" id="gb11">Button 11</button>
      <button class="gb gb-bordered hover-slide hover-fill reverse" id="gb12">Button 12</button>
    </div>
  </div>
  <div class="row mt-5 text-center">
    <div class="col-sm-12">
      <div class="font-weight-light">Made by <a href="http://www.thecssking.com/" target="_blank">Jordan</a> with <a href="https://www.gradientmagic.com/" target="_blank">Gradient Magic</a></div>
    </div>
  </div>
<div>
body {
  background: linear-gradient(90deg, rgba(165, 165, 165, 0.03) 0%, rgba(165, 165, 165, 0.03) 8%,rgba(235, 235, 235, 0.03) 8%, rgba(235, 235, 235, 0.03) 9%,rgba(7, 7, 7, 0.03) 9%, rgba(7, 7, 7, 0.03) 14%,rgba(212, 212, 212, 0.03) 14%, rgba(212, 212, 212, 0.03) 17%,rgba(219, 219, 219, 0.03) 17%, rgba(219, 219, 219, 0.03) 95%,rgba(86, 86, 86, 0.03) 95%, rgba(86, 86, 86, 0.03) 100%),linear-gradient(67.5deg, rgba(80, 80, 80, 0.03) 0%, rgba(80, 80, 80, 0.03) 11%,rgba(138, 138, 138, 0.03) 11%, rgba(138, 138, 138, 0.03) 17%,rgba(122, 122, 122, 0.03) 17%, rgba(122, 122, 122, 0.03) 24%,rgba(166, 166, 166, 0.03) 24%, rgba(166, 166, 166, 0.03) 27%,rgba(245, 245, 245, 0.03) 27%, rgba(245, 245, 245, 0.03) 89%,rgba(88, 88, 88, 0.03) 89%, rgba(88, 88, 88, 0.03) 100%),linear-gradient(67.5deg, rgba(244, 244, 244, 0.03) 0%, rgba(244, 244, 244, 0.03) 4%,rgba(16, 16, 16, 0.03) 4%, rgba(16, 16, 16, 0.03) 10%,rgba(157, 157, 157, 0.03) 10%, rgba(157, 157, 157, 0.03) 20%,rgba(212, 212, 212, 0.03) 20%, rgba(212, 212, 212, 0.03) 83%,rgba(5, 5, 5, 0.03) 83%, rgba(5, 5, 5, 0.03) 84%,rgba(237, 237, 237, 0.03) 84%, rgba(237, 237, 237, 0.03) 100%),linear-gradient(90deg, #FFF,#FFF);
  height: 94vh;
}

.fancy{
    font-family: 'Marcellus SC', serif;
}

.gb {
  padding: 8px 20px;
  margin-right: 25px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 4px;
}


$border-width: 4px;

// Help from 2nd answer in https://stackoverflow.com/questions/5706963/possible-to-use-border-radius-together-with-a-border-image-which-has-a-gradient

.gb-bordered {
  padding: 6px 20px;
  position: relative;
  border: $border-width solid transparent;

  background-clip: padding-box;
  transition: .5s all;
    
  &:after {
    transition: .5s all;
    position: absolute;  
    top: -$border-width;
    left: -$border-width;
    right: -$border-width;
    bottom: -$border-width;
    content: '';
    z-index: -1;
    border-radius: 4px;
  } 
}

.gb-rounded {
  border-radius: 50px;
  &.gb-bordered:after {
    border-radius: 50px;
  }
}

.hover-fill {
  transition: .6s all;
  &:hover {
    background-color: transparent;
    color: white;
  }
  &.reverse {
    background-color: transparent;
    color: white;
    &:hover {
      background-color: white;
      color: #333;
    }
  }
}

.hover-slide {
  transition: .6s all;

  &:after {
    background-size: 200% 100%;
    background-position: 0% 0;
  }
  &:hover {
    &:after {
      background-position: 100% 0;
    }
  }
}

#gb1 {
  &:after {
    background-image: linear-gradient(45deg, rgb(107, 41, 176) 0%, rgb(107, 41, 176) 26%,rgb(201, 24, 187) 26%, rgb(201, 24, 187) 45%,rgb(224, 20, 189) 45%, rgb(224, 20, 189) 53%,rgb(83, 45, 173) 53%, rgb(83, 45, 173) 59%,rgb(154, 33, 181) 59%, rgb(154, 33, 181) 62%,rgb(130, 37, 178) 62%, rgb(130, 37, 178) 66%,rgb(177, 28, 184) 66%, rgb(177, 28, 184) 77%,rgb(248, 16, 192) 77%, rgb(248, 16, 192) 100%);
  }
}

#gb2 {
  &:after {
    background-image: linear-gradient(45deg, rgb(11, 45, 126) 0%, rgb(11, 45, 126) 44%,rgb(21, 87, 153) 44%, rgb(21, 87, 153) 45%,rgb(30, 129, 181) 45%, rgb(30, 129, 181) 61%,rgb(40, 170, 208) 61%, rgb(40, 170, 208) 67%,rgb(49, 212, 235) 67%, rgb(49, 212, 235) 100%);
  }
}

#gb3 {
  color: white;
  border: none;
  background: linear-gradient(45deg, rgba(8, 211, 172, 0.45) 0%, rgba(8, 211, 172, 0.45) 12.5%,rgba(62, 29, 50, 0.45) 12.5%, rgba(62, 29, 50, 0.45) 25%,rgba(54, 55, 67, 0.45) 25%, rgba(54, 55, 67, 0.45) 37.5%,rgba(47, 81, 85, 0.45) 37.5%, rgba(47, 81, 85, 0.45) 50%,rgba(23, 159, 137, 0.45) 50%, rgba(23, 159, 137, 0.45) 62.5%,rgba(16, 185, 155, 0.45) 62.5%, rgba(16, 185, 155, 0.45) 75%,rgba(31, 133, 120, 0.45) 75%, rgba(31, 133, 120, 0.45) 87.5%,rgba(39, 107, 102, 0.45) 87.5%, rgba(39, 107, 102, 0.45) 100%),linear-gradient(135deg, rgb(87, 116, 221),rgb(35, 4, 229));
}

#gb4 {
  &:after {
    background: linear-gradient(45deg, rgb(239, 7, 129) 0%, rgb(239, 7, 129) 6%,rgb(208, 10, 112) 6%, rgb(208, 10, 112) 25%,rgb(177, 13, 96) 25%, rgb(177, 13, 96) 40%,rgb(147, 16, 79) 40%, rgb(147, 16, 79) 45%,rgb(116, 19, 62) 45%, rgb(116, 19, 62) 53%,rgb(85, 22, 46) 53%, rgb(85, 22, 46) 66%,rgb(54, 25, 29) 66%, rgb(54, 25, 29) 100%);
  }
}


#gb5 {
   &:after {
    background: linear-gradient(0, rgba(151, 49, 241, 0.46) 0%, rgba(151, 49, 241, 0.46) 6%,rgba(163, 71, 217, 0.46) 6%, rgba(163, 71, 217, 0.46) 33%,rgba(175, 94, 193, 0.46) 33%, rgba(175, 94, 193, 0.46) 47%,rgba(187, 116, 169, 0.46) 47%, rgba(187, 116, 169, 0.46) 65%,rgba(200, 139, 146, 0.46) 65%, rgba(200, 139, 146, 0.46) 77%,rgba(212, 161, 122, 0.46) 77%, rgba(212, 161, 122, 0.46) 87%,rgba(224, 184, 98, 0.46) 87%, rgba(224, 184, 98, 0.46) 97%,rgba(236, 206, 74, 0.46) 97%, rgba(236, 206, 74, 0.46) 100%),linear-gradient(90deg, rgb(233, 14, 27) 0%, rgb(233, 14, 27) 15%,rgb(235, 41, 27) 15%, rgb(235, 41, 27) 39%,rgb(238, 67, 26) 39%, rgb(238, 67, 26) 42%,rgb(240, 94, 26) 42%, rgb(240, 94, 26) 52%,rgb(243, 120, 25) 52%, rgb(243, 120, 25) 61%,rgb(245, 147, 25) 61%, rgb(245, 147, 25) 76%,rgb(248, 173, 24) 76%, rgb(248, 173, 24) 88%,rgb(250, 200, 24) 88%, rgb(250, 200, 24) 100%);
  } 
}

#gb6 {
  &:after {
    background: linear-gradient(164deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%,rgba(222, 222, 222, 0.08) 50%, rgba(222, 222, 222, 0.08) 100%),linear-gradient(73deg, rgba(182, 182, 182, 0.02) 0%, rgba(182, 182, 182, 0.02) 50%,rgba(216, 216, 216, 0.02) 50%, rgba(216, 216, 216, 0.02) 100%),linear-gradient(215deg, rgba(27, 27, 27, 0.09) 0%, rgba(27, 27, 27, 0.09) 50%,rgba(243, 243, 243, 0.09) 50%, rgba(243, 243, 243, 0.09) 100%),linear-gradient(236deg, rgba(242, 242, 242, 0.05) 0%, rgba(242, 242, 242, 0.05) 50%,rgba(16, 16, 16, 0.05) 50%, rgba(16, 16, 16, 0.05) 100%),linear-gradient(256deg, rgba(170, 170, 170, 0.07) 0%, rgba(170, 170, 170, 0.07) 50%,rgba(209, 209, 209, 0.07) 50%, rgba(209, 209, 209, 0.07) 100%),linear-gradient(126deg, rgba(204, 204, 204, 0.1) 0%, rgba(204, 204, 204, 0.1) 50%,rgba(26, 26, 26, 0.1) 50%, rgba(26, 26, 26, 0.1) 100%),linear-gradient(61deg, rgba(250, 250, 250, 0.01) 0%, rgba(250, 250, 250, 0.01) 50%,rgba(13, 13, 13, 0.01) 50%, rgba(13, 13, 13, 0.01) 100%),linear-gradient(56deg, rgba(210, 210, 210, 0.05) 0%, rgba(210, 210, 210, 0.05) 50%,rgba(79, 79, 79, 0.05) 50%, rgba(79, 79, 79, 0.05) 100%),linear-gradient(226deg, rgba(62, 62, 62, 0.08) 0%, rgba(62, 62, 62, 0.08) 50%,rgba(73, 73, 73, 0.08) 50%, rgba(73, 73, 73, 0.08) 100%),linear-gradient(90deg, rgb(236, 2, 158),rgb(161, 2, 79));
  }
}


#gb7, #gb10 {
  &:after {
    background-image: linear-gradient(135deg, rgb(246, 137, 24) 0%, rgb(246, 137, 24) 31%,rgb(174, 62, 159) 31%, rgb(174, 62, 159) 42%,rgb(210, 100, 92) 42%, rgb(210, 100, 92) 49%,rgb(138, 25, 227) 49%, rgb(138, 25, 227) 100%);
  }
}

#gb8 {
  &:after {
    background-image: linear-gradient(90deg, hsla(357,85%,70%, 1) 0%, hsla(357,85%,70%, 1) 14.3%,hsla(48.42,85%,70%, 1) 14.3%, hsla(48.42,85%,70%, 1) 28.6%,hsla(99.85,85%,70%, 1) 28.6%, hsla(99.85,85%,70%, 1) 42.9%,hsla(151.28,85%,70%, 1) 42.9%, hsla(151.28,85%,70%, 1) 57.2%,hsla(202.71,85%,70%, 1) 57.2%, hsla(202.71,85%,70%, 1) 71.5%,hsla(254.14,85%,70%, 1) 71.5%, hsla(254.14,85%,70%, 1) 85.8%,hsla(305.57,85%,70%, 1) 85.8%, hsla(305.57,85%,70%, 1) 100.1%);
  }
}

#gb9 {
  background-color: transparent;
  color: white;
  &:after {
    background-image: linear-gradient(135deg, rgb(13, 4, 178) 0%, rgb(13, 4, 178) 12.5%,rgb(17, 25, 182) 12.5%, rgb(17, 25, 182) 25%,rgb(20, 46, 185) 25%, rgb(20, 46, 185) 37.5%,rgb(24, 67, 189) 37.5%, rgb(24, 67, 189) 50%,rgb(28, 87, 192) 50%, rgb(28, 87, 192) 62.5%,rgb(32, 108, 196) 62.5%, rgb(32, 108, 196) 75%,rgb(35, 129, 199) 75%, rgb(35, 129, 199) 87.5%,rgb(39, 150, 203) 87.5%, rgb(39, 150, 203) 100%);
  }
  &:hover {
    color: white;
  }
}

#gb11 {
  &:after {
    background-image: linear-gradient(135deg, rgb(138, 229, 83) 0%, rgb(138, 229, 83) 22%,rgb(110, 203, 71) 22%, rgb(110, 203, 71) 28%,rgb(83, 176, 59) 28%, rgb(83, 176, 59) 72%,rgb(55, 150, 47) 72%, rgb(55, 150, 47) 100%);
  }
}

#gb12 {
  &:after {
    background-image: linear-gradient(45deg, rgba(49, 74, 89, 0.45) 0%, rgba(49, 74, 89, 0.45) 12.5%,rgba(122, 86, 72, 0.45) 12.5%, rgba(122, 86, 72, 0.45) 25%,rgba(170, 94, 60, 0.45) 25%, rgba(170, 94, 60, 0.45) 37.5%,rgba(219, 102, 49, 0.45) 37.5%, rgba(219, 102, 49, 0.45) 50%,rgba(146, 90, 66, 0.45) 50%, rgba(146, 90, 66, 0.45) 62.5%,rgba(98, 82, 78, 0.45) 62.5%, rgba(98, 82, 78, 0.45) 75%,rgba(195, 98, 55, 0.45) 75%, rgba(195, 98, 55, 0.45) 87.5%,rgba(73, 78, 83, 0.45) 87.5%, rgba(73, 78, 83, 0.45) 100%),linear-gradient(135deg, rgb(117, 6, 152),rgb(110, 34, 251));
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.