a, .actionlink { z-index: 1; color: white; display:inline-block; border-style: solid; border-width:1px; padding: 1em; position: relative; transition: color 1s; } /* inputs have a white background in this theme */ input.actionlink { color: black; } a:visited { color: white; } /* inverse the font color, as long as a black one is rolling out in backgound */ a:hover, a:visited:hover, .actionlink:hover { color:black; } @media print { .actionlink, .menuitem { display:none;} } /* button dark background */ div.bback { position: absolute; top: 0; left:0; width:100%; height:100%; z-index: -2; background-color: rgba(32,32,32,.3); } /* button white animated */ div.aback { transform: scaleX(0); transform-origin: 0px 50% 0px; transition: transform 1s; position: absolute; top: 0; left:0; width:100%; height:100%; z-index: -1; background-color:white; } a:hover > div.aback { transform: scaleX(1); }