JSFiddle - React, Tailwind, and code Playground
by Claudius
HTML
<div class="button_row_keycomp"><a class="glassbutton glassbutton_white_green" href="#">
<span>Fortsæt</span>
</a>
<span class="cancel_link">
<div class="clear"> </div>
</div>
CSS
.button_row_keycomp
{
float: right !important;
margin: 0px 10px -4px 6px;
text-align: right !important;
display: block;
}
a.glassbutton {
display: block;
float: left;
font: bold 12px arial, sans-serif;
height: 36px;
margin-right: 6px;
padding-right: 15px; /* sliding doors padding */
text-decoration: none !important;
white-space:nowrap;
margin-bottom: 10px;
letter-spacing: 1px;
border: 1px dotted green;
}
a.glassbutton span {
display: block;
line-height: 26px;
padding: 5px 0 5px 18px;
}
a.glassbutton:active {
background-position: bottom right;
color: #05547d;
outline: none; /* hide dotted outline in Firefox */
}
a.glassbutton:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
a.glassbutton:hover {
background-position: bottom right;
outline: none; /* hide dotted outline in Firefox */
}
a.glassbutton:hover span {
background-position: bottom left;
padding: 5px 0 5px 18px;
}