Please use simple three steps to create your website buttons.
You don't need to use same property again and again for different buttons.
- Create your your first button class name with all required properties [.Button].
- Create another class for size [.Small, .Medium, .Large]
- Create class for Background and Text Color [Red, Blue, Gray]
How to use your classes to create buttons?
See code below:CSS Code:
<style type="text/css"> /* Common Properties for all Buttons */ .button { background: #00a6fc; display: inline-block; text-align: center; padding: 9px 34px 11px; color: #fff; text-decoration: none; font-weight: bold; font-size: 13px; font-size: 1.3rem; line-height: 1; font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif; position: relative; cursor: pointer; border: none; outline: none; margin: 0; -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.28); border: 1px solid #0593dc; -webkit-transition: background-color .15s ease-in-out; -moz-transition: background-color .15s ease-in-out; -o-transition: background-color .15s ease-in-out; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } /* Buttons Sizes ---------- */ .small.button { font-size: 11px; padding: 8px 20px 10px; width: auto; } .large.button { font-size: 18px; padding: 11px 48px 13px; width: auto; } .nice.small.button { background-position: 0 -34px; } .nice.large.button { background-position: 0 -30px; } /* Colors ---------- */ .red.button { background-color: #e91c21; border: 1px solid #c60000; } .white.button { background-color: #e9e9e9; color: #333; border: 1px solid #cccccc; } .blue.button { background-color: #005fc9; } .nice.red.button { border: 1px solid #b90b0b; } .nice.white.button { border: 1px solid #cacaca; text-shadow: none !important; } .nice.blue.button { border: 1px solid #005fc9; } /* Hovers ---------- */ .button:hover, .button:focus { background-color: #0192dd; color: #fff; } .red.button:hover, .red.button:focus { background-color: #d01217; } .white.button:hover, .white.button:focus { background-color: #dadada; color: #333; } .blue.button:hover, .blue.button:focus { background-color: #0274f4; } /* Active ---------- */ .nice.button:active { -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.15); -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.15); box-shadow: inset 0 1px 0 rgba(0,0,0,.15); } </style>
HTML Code:
<div class="six columns"> <p><a class="small red button" href="#">Login</a></p> <p><a class="blue button" href="#">Submit</a></p> <p><a class="large white button" href="#">Reset</a></p> </div>
No comments:
Post a comment