GHOST BUTTONS
Semi-Transparent Fade
---------- CSS -----------------------------------------
.ghost-button-semi-transparent {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
border-color 0.2s ease-out;
}
.ghost-button-semi-transparent:hover,
.ghost-button-semi-transparent:active {
background-color: #fff; /* fallback */
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; /* fallback */
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in,
border-color 0.3s ease-in;
}
---------- HTML -----------------------------------------
<div style="text-align: center;">
<span style="text-shadow: 2px 2px #828282; color: black; font-size: 34px;">LÅT OSS HJÄLPA ER MED HEMSIDAN</span><br />
<br />
<a class="ghost-button-semi-transparent" href="http://www.swedishwebdesign.eu/p/kontakt.html">KLICKA HÄR</a></div>
<br /></div>
========================================================