<div class="padding-x-md padding-y-xl flex flex-center">
  <div class="text-center">
    <div class="margin-bottom-xs">
      <button class="reset btn-gradient-1">Button One</button>
    </div>

    <div>
      <button class="reset btn-gradient-2">Button Two</button>
    </div>
  </div>
</div>
// 💡 How to create gradient borders in CSS
// 🔗 https://codyhouse.co/nuggets/css-gradient-borders

// method 1 -> use border-image
.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}

// method 2 -> use background-clip to support border-radius
.btn-gradient-2 {
  background: 
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}

// demo stuff 👇
.btn-gradient-1,
.btn-gradient-2 {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--btn-font-size, 1em);
  color: var(--color-contrast-medium);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition: color .2s;
  
  &:hover {
    color: var(--color-contrast-high);
  }
}
View Compiled

External CSS

  1. https://unpkg.com/codyhouse-framework/main/assets/css/style.css
  2. https://codepen.io/codyhouse/pen/oNxLjqp

External JavaScript

This Pen doesn't use any external JavaScript resources.