JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<button>
<h1>
MY BUTTON</h1>
</button>

CSS

button {
  height: 150px;
  width: 550px;
  font-size:30px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
  
  background: red;
  border: 1px solid lime;
}

button:before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  height: 100px;
  width: 100px;
  transform: rotate(45deg);
  
  background: blue;
  border: 1px solid lime;
}


button:hover {
  color:white;
  background: darkblue;
  border: 1px solid cyan;
}

button:hover:before {
  background: white;
  border: 1px solid cyan;
}


/***********FOR DEMO ONLY*******************/


html, body {
    margin:0;
    padding:0;height:100%;
    vertical-align:top;overflow:hidden;
    background: rgb(79, 79, 79);
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}