JSFiddle - React, Tailwind, and code Playground
HTML
<div>Test Button</div>
CSS
div
{
background:-webkit-linear-gradient(top,orange,orangered);
background:-moz-linear-gradient(top,orange,orangered);
float:left;padding:10px 20px;color:white;text-shadow:0 1px rgba(0,0,0,0.4);
font-size:20px;font-family:sans-serif;border:1px orangered solid;
border-radius:5px;cursor:pointer;
box-shadow:inset 0 1px rgba(255,255,255,0.5);
}
div::after
{
content:' ►';
float:right;
margin:0 0 0 10px;
-moz-transition:0.5s all;
-webkit-transition:0.5s all;
}
div:hover::after
{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
text-shadow: 1px 0 rgba(0,0,0,0.4);
}