JSFiddle - React, Tailwind, and code Playground

by arun_etech

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div id="divtop" style="background-color: #00b698;text-align: center;">
    <div class="button-default button-slanted">
      <div class="hover-top"></div>
      <div class="hover-top-2"></div>
      <span class="button-slanted-content">Work With Us</span>
    </div>
  </div>
  <br/>
  <div id="divbottom" style="text-align: center;">
    <div class="button-default button-slanted">
        <div class="hover-bottom"></div>
        <div class="hover-bottom-2"></div>
      <span class="button-slanted-content">Work With Us</span>
    </div>
  </div>

CSS

/*top button*/

  #divtop {
    background-image: linear-gradient(to right, #00B698, #724EF4);
  }

  #divtop > .button-slanted:hover > .button-slanted-content {
    background: -webkit-linear-gradient( #00B698, #724EF4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hover-top{
    background: #FFF;
    width: 0px;
    height: 0px;    
    position: absolute;
    bottom: 0px;
    left: -1px;
    transition: all ease 0.4s;
    -webkit-backface-visibility: hidden;
  }
    .hover-top-2{
    background: #FFF;
    width: 0px;
    height: 0px;    
    position: absolute;
    top: 0px;
    right: -1px;
    transition: all ease 0.4s;
    -webkit-backface-visibility: hidden;
  }
  #divtop > .button-slanted:hover > .hover-top{
    width: 101%;
    height: 103%;
  }
   #divtop > .button-slanted:hover > .hover-top-2{
    width: 101%;
    height: 103%;
  }
	.button-default {
    color: black;
    background-color: transparent;
    text-align: center;
    text-transform: uppercase;
    padding: 5px 10px;
    margin: 10px;
    display: inline-block;
    border: 3px solid #fff;
    padding: 20px;
    color: #fff;
    
    box-shadow: inset 0px 0px 0 0 rgba(255, 255, 255, 0);
    transition: all ease 0.4s;
    -webkit-backface-visibility: hidden;
  }

  .button-slanted {
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
  }
  .button-slanted-content {
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);  
    display: inline-block;
    font-family: 'Roboto', sans-serif;
  }



  /*bottom button*/
  #divbottom > .button-default {
    border: 0px solid #00B698;
    color: #00B698;
    background-image: -webkit-linear-gradient(left, #00B698 0%, #724EF4 100%), -webkit-linear-gradient(left, #00B698 0%, #724EF4 100%);
    background-image: -moz-linear-gradient(left, #00B698 0%, #724EF4 100%), -moz-linear-gradient(left, #00B698 0%, #724EF4 100%);
   ...