<div class="text-center">
    <div class="m-bottom">
      <button class="btn-gradient-1">Button One</button>
    </div>

    <div>
      <button class="btn-gradient-2">Button Two</button>
    </div>
  </div>


/* 💡 How to create gradient borders in CSS */
/* 🔗 https://s-sd.ru/blog_studio_design/gradient-granicy/ */

/* method 1 -> use border-image */
.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, red) 1;
}
/* method 2 -> use background-clip to support border-radius */
.btn-gradient-2 {
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(to right, darkblue, red) 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: 1em;
  color: grey;
  padding: 1em;
  cursor: pointer;
  transition: color .2s;
}

.btn-gradient-1:hover,
.btn-gradient-2:hover {
    color: black;
}

.text-center {
  display:block;
  position:relative;
  margin:0 auto;
  width: 200px;
  top:80px;
}
.m-bottom {
  margin-bottom: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.