Created
July 6, 2012 17:54
-
-
Save phongjalvn/3061620 to your computer and use it in GitHub Desktop.
css3 buttons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Pressable CSS Buttons · CodePen</title> | |
| <link rel="stylesheet" href="http://codepen.io/stylesheets/css/normalize.css"> | |
| <style> | |
| html { | |
| text-align: center; | |
| } | |
| body { | |
| background-color: #fff0f5; | |
| background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| background-image: -moz-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| background-image: -ms-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| background-image: -o-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| display: inline-block; | |
| font-size: 100%; | |
| margin: 0 auto; | |
| padding: 3em 6em; | |
| text-align: left; | |
| } | |
| h1 { | |
| background-color: #7f5261; | |
| background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| border-radius: 0 .25em 0 0; | |
| color: #fff0f5; | |
| font-family: 'open sans', sans-serif; | |
| font-size: 3em; | |
| font-weight: bold; | |
| line-height: 1; | |
| margin-left: -999em; | |
| margin-bottom: -2px; | |
| padding: 1em 1em 1em 1000em; | |
| text-align: center; | |
| text-shadow: 0 .1em 0 hsla(0,0%,0%,.1); | |
| } | |
| p { | |
| color: #7f5261; | |
| display: inline-block; | |
| font-family: 'open sans', sans-serif; | |
| font-size: 1em; | |
| font-weight: bold; | |
| line-height: 1; | |
| margin: -1em 1em 0 0; | |
| width: 6em; | |
| vertical-align: middle; | |
| } | |
| hr { | |
| border: 1px solid #7f5261; | |
| margin: 0 0 1em 0; | |
| } | |
| div { | |
| background-color: #7f5261; | |
| border-radius: 0 0 .75em 0; | |
| color: #fff0f5; | |
| font-family: 'open sans', sans-serif; | |
| font-size: 1em; | |
| font-weight: bold; | |
| line-height: 1; | |
| margin-left: -999em; | |
| padding: 2em 1em 2em 1007em; | |
| text-align: center; | |
| } | |
| label:after { | |
| color: #bbb; | |
| content: ' #'; | |
| } | |
| input { | |
| background: #fff0f5; | |
| border: 1px solid #6e4150; | |
| color: #333; | |
| margin-right: 5.5em; | |
| padding: .5em; | |
| } | |
| .attribution { | |
| color: #888; | |
| margin-top: 3em; | |
| text-align: right; | |
| width: 100%; | |
| } | |
| .attribution a { | |
| color: #888; | |
| } | |
| .attribution a:hover, | |
| .attribution a:focus { | |
| color: #7f5261; | |
| } | |
| /* Button - these styles are the good stuff */ | |
| .button { | |
| background-color: #999; | |
| background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| border: none; | |
| border-radius: .5em; | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.25em 0 hsla(0,0%,0%,.5), | |
| 0 .25em .25em hsla(0,0%,0%,.1); | |
| color: #444; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-family: sans-serif; | |
| font-size: 1em; | |
| font-weight: bold; | |
| line-height: 1.5; | |
| margin: 0 .5em 1em; | |
| padding: .5em 1.5em .75em; | |
| position: relative; | |
| text-decoration: none; | |
| text-shadow: 0 1px 1px hsla(0,0%,100%,.25); | |
| vertical-align: middle; | |
| } | |
| .button:hover { | |
| outline: none; | |
| } | |
| .button:hover, | |
| .button:focus { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.25em 0 hsla(0,0%,0%,.5), | |
| inset 0 0 0 3em hsla(0,0%,100%,.2), | |
| 0 .25em .25em hsla(0,0%,0%,.1); | |
| } | |
| .button:active { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 0 0 3em hsla(0,0%,100%,.2), | |
| inset 0 .25em .5em hsla(0,0%,0%,.05), | |
| 0 -1px 1px hsla(0,0%,0%,.1), | |
| 0 1px 1px hsla(0,0%,100%,.25); | |
| margin-top: .25em; | |
| outline: none; | |
| padding-bottom: .5em; | |
| } | |
| /* Light Text */ | |
| .lightText { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.05), | |
| inset 0 -.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.25em 0 hsla(0,0%,0%,.5), | |
| 0 .25em .25em hsla(0,0%,0%,.1); | |
| color: #fff; | |
| text-shadow: 0 -1px 1px hsla(0,0%,0%,.25); | |
| } | |
| .lightText:hover, | |
| .lightText:focus { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.05), | |
| inset 0 -.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.25em 0 hsla(0,0%,0%,.5), | |
| inset 0 0 0 3em hsla(0,0%,100%,.2), | |
| 0 .25em .25em hsla(0,0%,0%,.1); | |
| } | |
| .lightText:active { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.05), | |
| inset 0 0 0 3em hsla(0,0%,100%,.2), | |
| inset 0 .25em .5em hsla(0,0%,0%,.05), | |
| 0 -1px 1px hsla(0,0%,0%,.1), | |
| 0 1px 1px hsla(0,0%,100%,.25); | |
| } | |
| /* Large */ | |
| .large { | |
| font-size: 1.25em; | |
| } | |
| /* Medium */ | |
| .medium { | |
| font-size: 1em; | |
| } | |
| /* Small */ | |
| .small { | |
| font-size: .75em; | |
| } | |
| /* Regular */ | |
| .regular { | |
| border-radius: .5em; | |
| } | |
| /* Square */ | |
| .square { | |
| border-radius: .25em; | |
| } | |
| /* Round */ | |
| .round { | |
| border-radius: 1.25em; | |
| } | |
| /* Red */ | |
| .red { | |
| background-color: #ff6c6f; | |
| } | |
| /* Orange */ | |
| .orange { | |
| background-color: #f6cf6f; | |
| } | |
| /* Yellow */ | |
| .yellow { | |
| background-color: #fff6c6; | |
| } | |
| /* Green */ | |
| .green { | |
| background-color: #6fcf6f; | |
| } | |
| /* Blue */ | |
| .blue { | |
| background-color: #6fc6ff; | |
| } | |
| /* Purple */ | |
| .purple { | |
| background-color: #f6c6ff; | |
| } | |
| /* White */ | |
| .white { | |
| background-color: #eee; | |
| } | |
| /* Grey */ | |
| .grey { | |
| background-color: #999; | |
| } | |
| /* Black */ | |
| .black { | |
| background-color: #444; | |
| } | |
| /* Custom */ | |
| .custom { | |
| background-color: #fff0f5; /* Set the button color here */ | |
| color: #444; /* Remove this for a dark background */ | |
| } | |
| | |
| </style> | |
| <style> | |
| #codepen-footer, #codepen-footer * { | |
| -webkit-box-sizing: border-box !important; | |
| -moz-box-sizing: border-box !important; | |
| box-sizing: border-box !important; | |
| } | |
| #codepen-footer { | |
| display: block !important; | |
| position: fixed !important; | |
| bottom: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| padding: 0 10px !important; | |
| margin: 0 !important; | |
| height: 30px !important; | |
| line-height: 30px !important; | |
| font-size: 12px !important; | |
| color: #eeeeee !important; | |
| background-color: #505050 !important; | |
| text-align: left !important; | |
| background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
| background: -moz-linear-gradient(top, #505050, #383838) !important; | |
| background: -ms-linear-gradient(top, #505050, #383838) !important; | |
| background: -o-linear-gradient(top, #505050, #383838) !important; | |
| border-top: 1px solid black !important; | |
| border-bottom: 1px solid black !important; | |
| border-radius: 0 !important; | |
| border-image: none !important; | |
| box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
| z-index: 300 !important; | |
| font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
| letter-spacing: 0 !important; | |
| word-spacing: 0 !important; | |
| } | |
| #codepen-footer a { | |
| color: #a7a7a7 !important; | |
| text-decoration: none !important; | |
| } | |
| #codepen-footer a:hover { | |
| color: white !important; | |
| } | |
| </style> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'> | |
| <h1>Pressable CSS Buttons</h1> | |
| <hr> | |
| <p>Red</p> | |
| <a class="button large regular red" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular red" href="javascript:void(0);">Button</a> | |
| <a class="button small regular red" href="javascript:void(0);">Button</a> | |
| <a class="button large square red" href="javascript:void(0);">Button</a> | |
| <a class="button medium square red" href="javascript:void(0);">Button</a> | |
| <a class="button small square red" href="javascript:void(0);">Button</a> | |
| <a class="button large round red" href="javascript:void(0);">Button</a> | |
| <a class="button medium round red" href="javascript:void(0);">Button</a> | |
| <a class="button small round red" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Orange</p> | |
| <a class="button large regular orange" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular orange" href="javascript:void(0);">Button</a> | |
| <a class="button small regular orange" href="javascript:void(0);">Button</a> | |
| <a class="button large square orange" href="javascript:void(0);">Button</a> | |
| <a class="button medium square orange" href="javascript:void(0);">Button</a> | |
| <a class="button small square orange" href="javascript:void(0);">Button</a> | |
| <a class="button large round orange" href="javascript:void(0);">Button</a> | |
| <a class="button medium round orange" href="javascript:void(0);">Button</a> | |
| <a class="button small round orange" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Yellow</p> | |
| <a class="button large regular yellow" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular yellow" href="javascript:void(0);">Button</a> | |
| <a class="button small regular yellow" href="javascript:void(0);">Button</a> | |
| <a class="button large square yellow" href="javascript:void(0);">Button</a> | |
| <a class="button medium square yellow" href="javascript:void(0);">Button</a> | |
| <a class="button small square yellow" href="javascript:void(0);">Button</a> | |
| <a class="button large round yellow" href="javascript:void(0);">Button</a> | |
| <a class="button medium round yellow" href="javascript:void(0);">Button</a> | |
| <a class="button small round yellow" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Green</p> | |
| <a class="button large regular green" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular green" href="javascript:void(0);">Button</a> | |
| <a class="button small regular green" href="javascript:void(0);">Button</a> | |
| <a class="button large square green" href="javascript:void(0);">Button</a> | |
| <a class="button medium square green" href="javascript:void(0);">Button</a> | |
| <a class="button small square green" href="javascript:void(0);">Button</a> | |
| <a class="button large round green" href="javascript:void(0);">Button</a> | |
| <a class="button medium round green" href="javascript:void(0);">Button</a> | |
| <a class="button small round green" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Blue</p> | |
| <a class="button large regular blue" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular blue" href="javascript:void(0);">Button</a> | |
| <a class="button small regular blue" href="javascript:void(0);">Button</a> | |
| <a class="button large square blue" href="javascript:void(0);">Button</a> | |
| <a class="button medium square blue" href="javascript:void(0);">Button</a> | |
| <a class="button small square blue" href="javascript:void(0);">Button</a> | |
| <a class="button large round blue" href="javascript:void(0);">Button</a> | |
| <a class="button medium round blue" href="javascript:void(0);">Button</a> | |
| <a class="button small round blue" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Purple</p> | |
| <a class="button large regular purple" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular purple" href="javascript:void(0);">Button</a> | |
| <a class="button small regular purple" href="javascript:void(0);">Button</a> | |
| <a class="button large square purple" href="javascript:void(0);">Button</a> | |
| <a class="button medium square purple" href="javascript:void(0);">Button</a> | |
| <a class="button small square purple" href="javascript:void(0);">Button</a> | |
| <a class="button large round purple" href="javascript:void(0);">Button</a> | |
| <a class="button medium round purple" href="javascript:void(0);">Button</a> | |
| <a class="button small round purple" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>White</p> | |
| <a class="button large regular white" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular white" href="javascript:void(0);">Button</a> | |
| <a class="button small regular white" href="javascript:void(0);">Button</a> | |
| <a class="button large square white" href="javascript:void(0);">Button</a> | |
| <a class="button medium square white" href="javascript:void(0);">Button</a> | |
| <a class="button small square white" href="javascript:void(0);">Button</a> | |
| <a class="button large round white" href="javascript:void(0);">Button</a> | |
| <a class="button medium round white" href="javascript:void(0);">Button</a> | |
| <a class="button small round white" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Grey</p> | |
| <a class="button lightText large regular grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium regular grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small regular grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText large square grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium square grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small square grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText large round grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium round grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small round grey" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Black</p> | |
| <a class="button lightText large regular black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium regular black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small regular black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText large square black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium square black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small square black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText large round black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium round black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small round black" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Custom</p> | |
| <a class="button large regular custom" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular custom" href="javascript:void(0);">Button</a> | |
| <a class="button small regular custom" href="javascript:void(0);">Button</a> | |
| <a class="button large square custom" href="javascript:void(0);">Button</a> | |
| <a class="button medium square custom" href="javascript:void(0);">Button</a> | |
| <a class="button small square custom" href="javascript:void(0);">Button</a> | |
| <a class="button large round custom" href="javascript:void(0);">Button</a> | |
| <a class="button medium round custom" href="javascript:void(0);">Button</a> | |
| <a class="button small round custom" href="javascript:void(0);">Button</a> | |
| <div> | |
| <label>Custom Background Colour:</label> | |
| <input id="background" type="text" value="fff0f5"> | |
| <label>Custom Font Colour:</label> | |
| <input id="color" type="text" value="444"> | |
| </div> | |
| <p class="attribution">Made by <a href="http://joshnh.com">Joshua Hibbert</a></p> | |
| <script src="http://code.jquery.com/jquery-latest.js"></script> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <script> | |
| (function() { | |
| var $background = $('#background'), | |
| $color = $('#color'), | |
| $custom = $('a.custom'); | |
| $background.bind('input propertychange', function() { | |
| $custom.css('background-color', '#' + $(this).val()); | |
| }); | |
| $color.bind('input propertychange', function() { | |
| $custom.css('color', '#' + $(this).val()); | |
| }); | |
| })(); | |
| </script> | |
| <div id="codepen-footer"> | |
| <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| | |
| <a href="/joshnh/pen/32/2">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var $background = $('#background'), | |
| $color = $('#color'), | |
| $custom = $('a.custom'); | |
| $background.bind('input propertychange', function() { | |
| $custom.css('background-color', '#' + $(this).val()); | |
| }); | |
| $color.bind('input propertychange', function() { | |
| $custom.css('color', '#' + $(this).val()); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'> | |
| <h1>Pressable CSS Buttons</h1> | |
| <hr> | |
| <p>Red</p> | |
| <a class="button large regular red" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular red" href="javascript:void(0);">Button</a> | |
| <a class="button small regular red" href="javascript:void(0);">Button</a> | |
| <a class="button large square red" href="javascript:void(0);">Button</a> | |
| <a class="button medium square red" href="javascript:void(0);">Button</a> | |
| <a class="button small square red" href="javascript:void(0);">Button</a> | |
| <a class="button large round red" href="javascript:void(0);">Button</a> | |
| <a class="button medium round red" href="javascript:void(0);">Button</a> | |
| <a class="button small round red" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Orange</p> | |
| <a class="button large regular orange" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular orange" href="javascript:void(0);">Button</a> | |
| <a class="button small regular orange" href="javascript:void(0);">Button</a> | |
| <a class="button large square orange" href="javascript:void(0);">Button</a> | |
| <a class="button medium square orange" href="javascript:void(0);">Button</a> | |
| <a class="button small square orange" href="javascript:void(0);">Button</a> | |
| <a class="button large round orange" href="javascript:void(0);">Button</a> | |
| <a class="button medium round orange" href="javascript:void(0);">Button</a> | |
| <a class="button small round orange" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Yellow</p> | |
| <a class="button large regular yellow" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular yellow" href="javascript:void(0);">Button</a> | |
| <a class="button small regular yellow" href="javascript:void(0);">Button</a> | |
| <a class="button large square yellow" href="javascript:void(0);">Button</a> | |
| <a class="button medium square yellow" href="javascript:void(0);">Button</a> | |
| <a class="button small square yellow" href="javascript:void(0);">Button</a> | |
| <a class="button large round yellow" href="javascript:void(0);">Button</a> | |
| <a class="button medium round yellow" href="javascript:void(0);">Button</a> | |
| <a class="button small round yellow" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Green</p> | |
| <a class="button large regular green" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular green" href="javascript:void(0);">Button</a> | |
| <a class="button small regular green" href="javascript:void(0);">Button</a> | |
| <a class="button large square green" href="javascript:void(0);">Button</a> | |
| <a class="button medium square green" href="javascript:void(0);">Button</a> | |
| <a class="button small square green" href="javascript:void(0);">Button</a> | |
| <a class="button large round green" href="javascript:void(0);">Button</a> | |
| <a class="button medium round green" href="javascript:void(0);">Button</a> | |
| <a class="button small round green" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Blue</p> | |
| <a class="button large regular blue" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular blue" href="javascript:void(0);">Button</a> | |
| <a class="button small regular blue" href="javascript:void(0);">Button</a> | |
| <a class="button large square blue" href="javascript:void(0);">Button</a> | |
| <a class="button medium square blue" href="javascript:void(0);">Button</a> | |
| <a class="button small square blue" href="javascript:void(0);">Button</a> | |
| <a class="button large round blue" href="javascript:void(0);">Button</a> | |
| <a class="button medium round blue" href="javascript:void(0);">Button</a> | |
| <a class="button small round blue" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Purple</p> | |
| <a class="button large regular purple" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular purple" href="javascript:void(0);">Button</a> | |
| <a class="button small regular purple" href="javascript:void(0);">Button</a> | |
| <a class="button large square purple" href="javascript:void(0);">Button</a> | |
| <a class="button medium square purple" href="javascript:void(0);">Button</a> | |
| <a class="button small square purple" href="javascript:void(0);">Button</a> | |
| <a class="button large round purple" href="javascript:void(0);">Button</a> | |
| <a class="button medium round purple" href="javascript:void(0);">Button</a> | |
| <a class="button small round purple" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>White</p> | |
| <a class="button large regular white" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular white" href="javascript:void(0);">Button</a> | |
| <a class="button small regular white" href="javascript:void(0);">Button</a> | |
| <a class="button large square white" href="javascript:void(0);">Button</a> | |
| <a class="button medium square white" href="javascript:void(0);">Button</a> | |
| <a class="button small square white" href="javascript:void(0);">Button</a> | |
| <a class="button large round white" href="javascript:void(0);">Button</a> | |
| <a class="button medium round white" href="javascript:void(0);">Button</a> | |
| <a class="button small round white" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Grey</p> | |
| <a class="button lightText large regular grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium regular grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small regular grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText large square grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium square grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small square grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText large round grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium round grey" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small round grey" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Black</p> | |
| <a class="button lightText large regular black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium regular black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small regular black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText large square black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium square black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small square black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText large round black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText medium round black" href="javascript:void(0);">Button</a> | |
| <a class="button lightText small round black" href="javascript:void(0);">Button</a> | |
| <hr> | |
| <p>Custom</p> | |
| <a class="button large regular custom" href="javascript:void(0);">Button</a> | |
| <a class="button medium regular custom" href="javascript:void(0);">Button</a> | |
| <a class="button small regular custom" href="javascript:void(0);">Button</a> | |
| <a class="button large square custom" href="javascript:void(0);">Button</a> | |
| <a class="button medium square custom" href="javascript:void(0);">Button</a> | |
| <a class="button small square custom" href="javascript:void(0);">Button</a> | |
| <a class="button large round custom" href="javascript:void(0);">Button</a> | |
| <a class="button medium round custom" href="javascript:void(0);">Button</a> | |
| <a class="button small round custom" href="javascript:void(0);">Button</a> | |
| <div> | |
| <label>Custom Background Colour:</label> | |
| <input id="background" type="text" value="fff0f5"> | |
| <label>Custom Font Colour:</label> | |
| <input id="color" type="text" value="444"> | |
| </div> | |
| <p class="attribution">Made by <a href="http://joshnh.com">Joshua Hibbert</a></p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| text-align: center; | |
| } | |
| body { | |
| background-color: #fff0f5; | |
| background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| background-image: -moz-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| background-image: -ms-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| background-image: -o-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)); | |
| display: inline-block; | |
| font-size: 100%; | |
| margin: 0 auto; | |
| padding: 3em 6em; | |
| text-align: left; | |
| } | |
| h1 { | |
| background-color: #7f5261; | |
| background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| border-radius: 0 .25em 0 0; | |
| color: #fff0f5; | |
| font-family: 'open sans', sans-serif; | |
| font-size: 3em; | |
| font-weight: bold; | |
| line-height: 1; | |
| margin-left: -999em; | |
| margin-bottom: -2px; | |
| padding: 1em 1em 1em 1000em; | |
| text-align: center; | |
| text-shadow: 0 .1em 0 hsla(0,0%,0%,.1); | |
| } | |
| p { | |
| color: #7f5261; | |
| display: inline-block; | |
| font-family: 'open sans', sans-serif; | |
| font-size: 1em; | |
| font-weight: bold; | |
| line-height: 1; | |
| margin: -1em 1em 0 0; | |
| width: 6em; | |
| vertical-align: middle; | |
| } | |
| hr { | |
| border: 1px solid #7f5261; | |
| margin: 0 0 1em 0; | |
| } | |
| div { | |
| background-color: #7f5261; | |
| border-radius: 0 0 .75em 0; | |
| color: #fff0f5; | |
| font-family: 'open sans', sans-serif; | |
| font-size: 1em; | |
| font-weight: bold; | |
| line-height: 1; | |
| margin-left: -999em; | |
| padding: 2em 1em 2em 1007em; | |
| text-align: center; | |
| } | |
| label:after { | |
| color: #bbb; | |
| content: ' #'; | |
| } | |
| input { | |
| background: #fff0f5; | |
| border: 1px solid #6e4150; | |
| color: #333; | |
| margin-right: 5.5em; | |
| padding: .5em; | |
| } | |
| .attribution { | |
| color: #888; | |
| margin-top: 3em; | |
| text-align: right; | |
| width: 100%; | |
| } | |
| .attribution a { | |
| color: #888; | |
| } | |
| .attribution a:hover, | |
| .attribution a:focus { | |
| color: #7f5261; | |
| } | |
| /* Button - these styles are the good stuff */ | |
| .button { | |
| background-color: #999; | |
| background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1)); | |
| border: none; | |
| border-radius: .5em; | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.25em 0 hsla(0,0%,0%,.5), | |
| 0 .25em .25em hsla(0,0%,0%,.1); | |
| color: #444; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-family: sans-serif; | |
| font-size: 1em; | |
| font-weight: bold; | |
| line-height: 1.5; | |
| margin: 0 .5em 1em; | |
| padding: .5em 1.5em .75em; | |
| position: relative; | |
| text-decoration: none; | |
| text-shadow: 0 1px 1px hsla(0,0%,100%,.25); | |
| vertical-align: middle; | |
| } | |
| .button:hover { | |
| outline: none; | |
| } | |
| .button:hover, | |
| .button:focus { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.25em 0 hsla(0,0%,0%,.5), | |
| inset 0 0 0 3em hsla(0,0%,100%,.2), | |
| 0 .25em .25em hsla(0,0%,0%,.1); | |
| } | |
| .button:active { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 0 0 3em hsla(0,0%,100%,.2), | |
| inset 0 .25em .5em hsla(0,0%,0%,.05), | |
| 0 -1px 1px hsla(0,0%,0%,.1), | |
| 0 1px 1px hsla(0,0%,100%,.25); | |
| margin-top: .25em; | |
| outline: none; | |
| padding-bottom: .5em; | |
| } | |
| /* Light Text */ | |
| .lightText { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.05), | |
| inset 0 -.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.25em 0 hsla(0,0%,0%,.5), | |
| 0 .25em .25em hsla(0,0%,0%,.1); | |
| color: #fff; | |
| text-shadow: 0 -1px 1px hsla(0,0%,0%,.25); | |
| } | |
| .lightText:hover, | |
| .lightText:focus { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.05), | |
| inset 0 -.2em 0 hsla(0,0%,100%,.1), | |
| inset 0 -.25em 0 hsla(0,0%,0%,.5), | |
| inset 0 0 0 3em hsla(0,0%,100%,.2), | |
| 0 .25em .25em hsla(0,0%,0%,.1); | |
| } | |
| .lightText:active { | |
| box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25), | |
| inset 0 2px 0 hsla(0,0%,100%,.1), | |
| inset 0 1.2em 0 hsla(0,0%,100%,.05), | |
| inset 0 0 0 3em hsla(0,0%,100%,.2), | |
| inset 0 .25em .5em hsla(0,0%,0%,.05), | |
| 0 -1px 1px hsla(0,0%,0%,.1), | |
| 0 1px 1px hsla(0,0%,100%,.25); | |
| } | |
| /* Large */ | |
| .large { | |
| font-size: 1.25em; | |
| } | |
| /* Medium */ | |
| .medium { | |
| font-size: 1em; | |
| } | |
| /* Small */ | |
| .small { | |
| font-size: .75em; | |
| } | |
| /* Regular */ | |
| .regular { | |
| border-radius: .5em; | |
| } | |
| /* Square */ | |
| .square { | |
| border-radius: .25em; | |
| } | |
| /* Round */ | |
| .round { | |
| border-radius: 1.25em; | |
| } | |
| /* Red */ | |
| .red { | |
| background-color: #ff6c6f; | |
| } | |
| /* Orange */ | |
| .orange { | |
| background-color: #f6cf6f; | |
| } | |
| /* Yellow */ | |
| .yellow { | |
| background-color: #fff6c6; | |
| } | |
| /* Green */ | |
| .green { | |
| background-color: #6fcf6f; | |
| } | |
| /* Blue */ | |
| .blue { | |
| background-color: #6fc6ff; | |
| } | |
| /* Purple */ | |
| .purple { | |
| background-color: #f6c6ff; | |
| } | |
| /* White */ | |
| .white { | |
| background-color: #eee; | |
| } | |
| /* Grey */ | |
| .grey { | |
| background-color: #999; | |
| } | |
| /* Black */ | |
| .black { | |
| background-color: #444; | |
| } | |
| /* Custom */ | |
| .custom { | |
| background-color: #fff0f5; /* Set the button color here */ | |
| color: #444; /* Remove this for a dark background */ | |
| } | |
| |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment