Friday, January 31, 2014
Metro Style Buttons using CSS3
Posted by
ddddf
at
1:24 AM
Labels:
css,
css code,
css flat style,
css snippets,
css3 code,
extreme css,
flat style css code,
metro css code,
metro style css
Currently the Metro Style is in Trends, After the Launch a Metro UI in Windows it Became Trends on Internet to use Metro Style and Flat Design. So by this i have thought lets make a Metro Style Button Using Css
CSS Code:
Output :
Output Image (if your Brower is Old):
CSS Code:
.btn-metro {
display: inline-block;
padding: 10px;
margin: 10px;
background: #08C;
/* Font styles */
color: white;
font-weight: bold;
text-decoration: none;
}
.btn-metro:hover { background: #0AF; color:white important; text-decoration:none }
.btn-metro.three-d {
position: relative;
box-shadow:
1px 1px #53A7EA,
2px 2px #53A7EA,
3px 3px #53A7EA;
transition: all 0.1s ease-in;
}
.btn-metro.three-d:active {
box-shadow: none;
top: 3px;
left: 3px;
}
Output :
Output Image (if your Brower is Old):
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment