Some buttons like the mozilla.support buttons. Not the best, but easy to make.
A Pen by Felix Schwarzer on CodePen.
<div class="holder"> | |
<h1>Mozilla-like Buttons</h1> | |
<button class="button">Button</button> | |
<button class="back">Back</button> | |
<button class="site">2</button> | |
<button class="site">1</button> | |
</div> |
/* Hey | |
i hope you like these buttons :) I made them look like the really nice buttons | |
from | |
http://support.mozilla.org | |
*/ |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); | |
/* General Buttons */ | |
button { | |
width: 130px; | |
height: 40px; | |
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */ | |
border: none; | |
border-radius: 5px; | |
position: relative; | |
border-bottom: 4px solid #2b8bc6; | |
color: #fbfbfb; | |
font-weight: 600; | |
font-family: 'Open Sans', sans-serif; | |
text-shadow: 1px 1px 1px rgba(0,0,0,.4); | |
font-size: 15px; | |
text-align: left; | |
text-indent: 5px; | |
box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2); | |
cursor: pointer; | |
/* Just for presentation */ | |
display: block; | |
margin: 0 auto; | |
margin-bottom: 20px; | |
} | |
button:active { | |
box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2); | |
top: 1px; | |
} | |
button:after { | |
content: ""; | |
width: 0; | |
height: 0; | |
display: block; | |
border-top: 20px solid #187dbc; | |
border-bottom: 20px solid #187dbc; | |
border-left: 16px solid transparent; | |
border-right: 20px solid #187dbc; | |
position: absolute; | |
opacity: 0.6; | |
right: 0; | |
top: 0; | |
border-radius: 0 5px 5px 0; | |
} | |
/* Button pointing left */ | |
button.back { | |
text-align: right; | |
padding-right: 12px; | |
box-sizing: border-box; | |
} | |
button.back:after { | |
content: ""; | |
width: 0; | |
height: 0; | |
display: block; | |
border-top: 20px solid #187dbc; | |
border-bottom: 20px solid #187dbc; | |
border-right: 16px solid transparent; | |
border-left: 20px solid #187dbc; | |
position: absolute; | |
opacity: 0.6; | |
left: 0; | |
top: 0; | |
border-radius: 5px 0 0 5px; | |
} | |
/* Single buttons */ | |
button.site { | |
width: 40px; | |
text-align: center; | |
text-indent: 0; | |
} | |
button.site:after{ | |
display: none; | |
} | |
/* Presentation stuff */ | |
.holder { | |
width: 400px; | |
background: #efefef; | |
padding: 30px 10px; | |
box-sizing: border-box; | |
margin: 0 auto; | |
margin-top: 20px; | |
text-align: center; | |
} | |
h1 { | |
font: 400 16px 'Open Sans'; | |
text-transform: uppercase; | |
color: #999; | |
text-shadow: 1px 1px 1px #fff; | |
margin-bottom: 30px; | |
} | |