JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<!doctype html>
<html lang="de">
<head>
   <title>Futuristic Button</title>
</head>
<body>
   <a class="gplusbtn" title="this is a button" href="#">
      <span class="border">
      </span>
      <span class="button">
         <span class="button-inner">Home</span>
      </span>
   </div>
</body>
</html>

CSS

div,span{margin:0;padding:0;border:0;}

body{
   background:#fff;
}

.gplusbtn{
   position:relative;
   display:block;
   width:300px;
   height:300px;
   margin:100px;
   overflow:visible;
   -webkit-border-radius:150px;
   -moz-border-radius:150px;
   border-radius:150px;
   text-decoration:none;
   color:#fff;
}

.gplusbtn:hover,.gplusbtn:active{
   text-decoration:underline;
   color:#fff;
}

.gplusbtn span{
   display:block;
   cursor:pointer;
}

.gplusbtn .border{
   position:absolute;
   z-index:1;
   top:50px;
   left:50px;
   width:160px;
   height:160px;
   border-width:20px;
   border-style:solid;
   border-top-color:rgb(95,144,187);   /* fallback */
   border-right-color:rgb(64,180,73);
   border-bottom-color:rgb(248,204,48);
   border-left-color:rgb(219,74,55);
   -webkit-border-radius:100px;
   -moz-border-radius:100px;
   border-radius:100px;
   -webkit-animation-name:turn;
   -moz-animation-name:turn;
   -webkit-animation-duration:5s;
   -moz-animation-duration:5s;
   -webkit-animation-timing-function:linear;
   -webkit-animation-iteration-count:infinite;
   -moz-animation-timing-function:linear;
   -moz-animation-iteration-count:infinite;
   -webkit-transition:width 0.5s ease-in-out,height 0.5s ease-in-out,-webkit-border-radius 0.5s ease-in-out,border-radius 0.5s ease-in-out,top 0.5s ease-in-out,left 0.5s ease-in-out;
   -moz-transition:width 0.5s ease-in-out,height 0.5s ease-in-out,-webkit-border-radius 0.5s ease-in-out,border-radius 0.5s ease-in-out,top 0.5s ease-in-out,left 0.5s ease-in-out;
   -o-transition:width 0.5s ease-in-out,height 0.5s ease-in-out,-webkit-border-radius 0.5s ease-in-out,border-radius 0.5s ease-in-out,top 0.5s ease-in-out,left 0.5s ease-in-out;
   -ms-transition:width 0.5s ease-in-out,height 0.5s ease-in-out,-webkit-border-radius 0.5s ease-in-out,border-radius 0.5s ease-in-out,top 0.5s ease-in-out,left 0.5s ease-in-out;
   behavior:url(pie.htc);
}

.gplusbtn .button{
   position:absolute;
   z-index:2;
   top:75px;
  ...