<div class="container">
  <section class="row gradient">
    <h3>Radient Buttons</h3>
    <a class="btn btn-1">Hover Me</a>
    <a class="btn btn-2">Hover Me</a>
    <a class="btn btn-3">Hover Me</a>
    <a class="btn btn-4">Hover Me</a>
    <a class="btn btn-5">Hover Me</a>
  </section>
  <section class="row luxury">
    <h3 class="txt-white">Luxury Style</h3>
    <a class="btn btn-1">Hover Me</a>
    <a class="btn btn-2">Hover Me</a>
    <a class="btn btn-3">Hover Me</a>
    <a class="btn btn-4">Hover Me</a>
  </section>
  <section class="row border">
    <h3 class="txt-white">Border / Outline Style</h3>
    <a class="btn btn-1">Hover Me</a>
    <a class="btn btn-2">Hover Me</a>
    <a class="btn btn-3">Hover Me</a>
    <a class="btn btn-4">Hover Me</a>
  </section>
  <section class="row border_plus">
    <h3>Border Plus</h3>
    <a class="btn btn-1"><span class="deco_top"></span>Hover Me<span class="deco_bottom"></span></a>
    <a class="btn btn-2">Hover Me<span></span></a>
    <a class="btn btn-3"><span class="deco_top"></span>Hover Me<span class="deco_bottom"></span></a>
    <a class="btn btn-4">Hover Me<span></span></a>
  </section>
  <section class="row block">
    <h3>Block</h3>
    <a class="btn btn-1">Hover Me</a>
    <a class="btn btn-2">Hover Me</a>
    <a class="btn btn-3">Hover Me</a>
    <a class="btn btn-4">Hover Me</a>
  </section>
</div>

/* layout */
body{  
  font-family: 'Saira Semi Condensed', sans-serif;
  font-weight:300;
  letter-spacing:2px;
  margin:0;
  padding:0;
}
.container{
  min-height:100vh;
  margin:0 auto;
}
.row{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align:center;
  padding:100px 10%;
}
h3{
  display:block;
  width:100%;
  margin:10px 10px 20px;
}
h3.txt-white{
  color:#fff;
}
.btn{
  flex: 1 auto;
  margin:5px;
  padding:10px 25px;
  text-align:center;
  background:#eee;
  transition: all 0.5s ease-out;
  cursor:crosshair;
}

/* ---- gradient btns ---- */
/* inspired by https://codepen.io/pirrera/pen/bqVeGx
   gradient from https://webgradients.com */
.gradient{ /* block background */
  background-color:#fff;
}
.gradient .btn{ /* general */
  color:#fff;
  border-radius:4px;
  background-size: 200% auto;
  box-shadow:0px 0px 15px 0 rgba(0,0,0,.1);
}
.gradient .btn:hover{
  background-position: right center;
}

.gradient .btn-1{
  background-image: linear-gradient(to right, #5ee7df 0%, #b470ca 51%, #5ee7df 100%);
}
.gradient .btn-2{
  background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%);
}
.gradient .btn-3{
  background-image: linear-gradient(to right, #ffc4c4 0%, #a3b6ff 51%, #ffc4c4 100%);
}
.gradient .btn-4{
  background-image: linear-gradient(to right, #EAECC6 0%, #2BC0E4 51%, #EAECC6 100%);
}
.gradient .btn-5{
  background-image: linear-gradient(45deg, #ace0f9 0%, #fff1eb 51%, #ace0f9 100%);
}


/* ---- luxury btns ---- */
.luxury{ /* block background */
  background-color:#161616;
}
.luxury .btn{ /* general */
  background:transparent;
  background-position: 1% 50%;
  background-size: 300% 300%;
  color:#fff;
}

.luxury .btn-1{ /* inspired by https://codepen.io/dbox/pen/bdzeEw */
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.3);
  background-image: linear-gradient(270deg, rgba(255,255,255,.9), rgba(255,255,255,.9), rgba(255,255,255,0), rgba(255,255,255,0));
}
.luxury .btn-1:hover{
  border-color:transparent;
  color:#161616;
  background-position: 99% 50%;
}

.luxury .btn-2{
  border:1px solid rgba(255,255,255,0);
  background-image: linear-gradient(45deg, transparent 0%, transparent 75%, rgba(255,255,255,0.8) 75%, transparent 100%);
}
.luxury .btn-2:hover{
  border:1px solid rgba(255,255,255,0.5);
  background-position:150% top;
}

.luxury .btn-3{
  background-image: linear-gradient(45deg, transparent 0%, rgba(255,255,255,0.5) 51%, transparent 100%);  
}
.luxury .btn-3:hover{
  background-position:right top;
}

.luxury .btn-4{
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 0 20px 0 rgba(255,255,255,.5) inset;
}
.luxury .btn-4:hover{
  box-shadow:0 0 50px 2px rgba(255,255,255,.5) inset;
}

/* ---- border btns ---- */
.border{ /* block background */
  background-color:#0d47a1;
}
.border .btn{ /* general */
  background:transparent;
  color:#fff;
}

.border .btn-1{
  padding:5px 25px;
  border:1px solid rgba(255,255,255,.3);
  outline:1px solid rgba(255,255,255,.8);
  outline-offset:3px;
}
.border .btn-1:hover{
  border:1px solid #fff;
  outline:1px solid rgba(255,255,255,.3);
}

.border .btn-2{
  border-top:1px solid transparent;
  border-bottom:1px solid transparent;
  border-image: linear-gradient(to right, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 90%);
  border-image-slice: 1;
}
.border .btn-2:hover{
  border-image-slice:30;
}

.border .btn-3{
  padding:5px 25px;
  outline:1px solid rgba(255,255,255,.3);
  outline-offset:5px;
}
.border .btn-3:hover{
  outline:1px solid rgba(255,255,255,1);
  outline-offset:2px;
}

.border .btn-4{
  outline:1px solid rgba(255,255,255,.8);
  outline-offset:0;
}
.border .btn-4:hover{
  outline:1px solid rgba(255,255,255,0);
  outline-offset:5px;
}


/* ---- border_plus btns ---- */
.border_plus{ /* block background */
  background-color:#eee;
}
.border_plus .btn{ /* general */
  background:transparent;
}

.border_plus .btn-1{
  position: relative;
  overflow:hidden;
}
.border_plus .btn-1:before{
  content:'';
  display:block;
  border:1px solid #000;
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  position: absolute;
  top: 0;
  left: 0;
}
.border_plus .btn-1 span:before,
.border_plus .btn-1 span:after{
  content:'';
  display:block;
  width: 10px;
  height: 10px;
  border-radius:6px;
  border:1px solid #000;
  background-color:#eee;
  position: absolute;
  transition:.4s;
}
.border_plus .btn-1 .deco_top:before{
  top: -6px;
  left: -6px;
}
.border_plus .btn-1 .deco_top:after{
  top: -6px;
  right: -6px;
}
.border_plus .btn-1 .deco_bottom:before{
  bottom: -6px;
  left: -6px;
}
.border_plus .btn-1 .deco_bottom:after{
  bottom: -6px;
  right: -6px;
}
.border_plus .btn-1:hover{
  background-color:#000;
  color:#fff;
}
.border_plus .btn-1:hover span:before,
.border_plus .btn-1:hover span:after{
  width: 12px;
  height: 12px;
}

.border_plus .btn-2{
  position: relative;
  transition:.4s .4s;
}
.border_plus .btn-2 span:before,
.border_plus .btn-2 span:after{
  content:'';
  display:block;
  width: 0;
  height: 0;
  border:1px solid rgba(0,0,0,0);
  position: absolute;
  top: 0;right: 0;bottom: 0;left: -1px;
  margin:auto;
  transition:.4s .4s;
}
.border_plus .btn-2 span:before{
  height: 100%;
}
.border_plus .btn-2 span:after{
  width: 100%;
}
.border_plus .btn-2:hover{
  background:#000;
  color:#fff;
}
.border_plus .btn-2:hover span:before{
  border-top:1px solid rgba(0,0,0,.8);
  border-bottom:1px solid rgba(0,0,0,.8);
  width: 100%;
  transition:.4s;
}
.border_plus .btn-2:hover span:after{
  border-left:1px solid rgba(0,0,0,.8);
  border-right:1px solid rgba(0,0,0,.8);
  height: 100%;
  transition:.4s;
}

.border_plus .btn-3{
  border:1px solid #000;
  position: relative;
  z-index: 1;
}
.border_plus .btn-3 span:before,
.border_plus .btn-3 span:after{
  content:'';
  display:block;
  width: 10px;
  height: 10px;
  border:0px solid #000;
  background-color:#eee;
  position: absolute;
  transition: width .4s .4s,
              height .4s .4s,
              background .4s;
  z-index: -1;
}
.border_plus .btn-3 .deco_top:before{
  top: -2px;
  left: -2px;
  border-top-width:2px;
  border-left-width:2px;
}
.border_plus .btn-3 .deco_top:after{
  top: -2px;
  right: -2px;
  border-top-width:2px;
  border-right-width:2px;
}
.border_plus .btn-3 .deco_bottom:before{
  bottom: -2px;
  left: -2px;
  border-bottom-width:2px;
  border-left-width:2px;
}
.border_plus .btn-3 .deco_bottom:after{
  bottom: -2px;
  right: -2px;
  border-bottom-width:2px;
  border-right-width:2px;
}
.border_plus .btn-3:hover{
  color:#fff;
}
.border_plus .btn-3:hover span:before,
.border_plus .btn-3:hover span:after{
  width: 50%;
  height: 50%;
  background-color:#000;
  transition: width .4s,
              height .4s,
              background .4s .5s;
}

.border_plus .btn-4{
  position: relative;
  transition:.4s 0s;
}
.border_plus .btn-4:before,
.border_plus .btn-4:after,
.border_plus .btn-4 span:before,
.border_plus .btn-4 span:after{
  content:'';
  display:block;
  width: 0;
  height: 0;
  background:#000000;
  position: absolute;
  margin:auto;
  transition:.4s .4s;
}
.border_plus .btn-4:before,
.border_plus .btn-4 span:before{
  height: 1px;
}
.border_plus .btn-4:after,
.border_plus .btn-4 span:after{
  width: 1px;
}
.border_plus .btn-4 span:before{
  top: 0;
  left: 0;
}
.border_plus .btn-4:before{
  bottom: 0;
  right: 0;
}
.border_plus .btn-4 span:after{
  bottom: 0;
  left: 0;
}
.border_plus .btn-4:after{
  top: 0;
  right: 0;
}
.border_plus .btn-4:hover{
  background:#000;
  color:#fff;
  transition:.4s .4s;
}
.border_plus .btn-4:hover span:before,
.border_plus .btn-4:hover:before{
  width: 100%;
  transition:.4s 0s;
}
.border_plus .btn-4:hover:after,
.border_plus .btn-4:hover span:after{
  height: 100%;
  transition:.4s 0s;
}


/* ---- block btns ---- */
.block .btn{ /* general */
  position:relative;
  overflow:hidden;
  z-index: 1;
}
.block .btn:before,
.block .btn:after{
  content:'';
  display:block;
  width: 0;
  height: 0;
  position: absolute;
  z-index: -1;
  transition:.4s;
}
.block .btn:hover{
  color:#fafafa;
}

.block .btn-1:before,
.block .btn-1:after{
  width: 100%;
  left: 0;
  bottom: 0;
  background:#cc0000;
}
.block .btn-1:after{
  top: 0;
  bottom: auto
}
.block .btn-1:hover{
  background:#111111;
  transition:.4s .2s;
}
.block .btn-1:hover:before,
.block .btn-1:hover:after{
  height: 5px;
}

.block .btn-2:before,
.block .btn-2:after{
  border-radius:50%;
  background:#00cccc;
}
.block .btn-2:before{
  top: -15px;
  left: -15px;
}
.block .btn-2:after{
  bottom: -15px;
  right: -15px;
}
.block .btn-2:hover{
  background:#111111;
  transition:background .4s .15s;
}
.block .btn-2:hover:before,
.block .btn-2:hover:after{
  width: 30px;
  height: 30px;
}

.block .btn-3:before,
.block .btn-3:after{
  height: 100%;
  transform:skewX(45deg);
  background:#00cc00;
  top: 0;
  left: -5%;
}
.block .btn-3:after{
  left: auto;
  right: -5%;
}
.block .btn-3:hover{
  background:#111111;
  transition:background .4s .15s;
}
.block .btn-3:hover:before,
.block .btn-3:hover:after{
  width: 110%;
}

.block .btn-4:before{
  height: 100%;
  background:#ffcc00;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin:auto;
}
.block .btn-4:hover{
  background:#111111;
  color:#111111;
  transition:background .2s .4s;
}
.block .btn-4:hover:before{
  width: 90%;
}