JSFiddle - React, Tailwind, and code Playground

by Vaibhav Deshwal

HTML

<div class="rounded transition"><span class="round-content">Login</span></div>

CSS

body{
    background-color:#1abc9c;
}
.rounded{
    color:#ecf0f1;
    background-color: #34495e;
    margin: 50px;
    width: 100px;
    height: 100px;
    border-radius: 9%;
    border:1px solid #ecf0f1;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: background-color 0.9s ease;
    -moz-transition: background-color 0.9s ease;
    -ms-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease;
    -webkit-transition: color 0.9s ease;
    -moz-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    transition: color 0.9s ease;
}
.round-content{
    -webkit-transform: rotate(45deg);
    position: absolute;
    font-size: 1.2em;
    font-weight: 800;
    color: inherit;
    top: 1.8em;
    left: 1.5em;
}
.rounded:hover{
    background-color:#ecf0f1;
    color: #34495e;
}