CSS3 - Button Reflection
CSS3 to add reflection to a button or object.
HTML
<button>Read More</button>
CSS
button {
display: block;
position:relative;
margin: 50px auto;
padding: 6 10px;
background: #d37a16;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #70430e;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
color: #fff;
font-family:Helvetica;
font-size:21px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-align: center;
cursor: pointer;
}
button:hover {
background: #2372c6;
border: 1px solid #0f3f74;
}
button:before {
position: absolute;
display: block;
margin: 0 auto;
padding: 0;
width: 96%;
height: 12px;
background: rgba(255, 255, 255, 0.25);
content: '';
-moz-border-radius: 15px;
border-radius: 15px;
}