Created
July 6, 2012 18:04
-
-
Save phongjalvn/3061693 to your computer and use it in GitHub Desktop.
popup button
This file contains hidden or 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>PopUp Buttons · CodePen</title> | |
| <style> | |
| @import url(http://fonts.googleapis.com/css?family=Arvo:700); | |
| button{ | |
| display: inline; | |
| position: relative; | |
| top:-0px; | |
| min-width: 80px; | |
| min-height: 30px; | |
| padding: 10px 25px 10px 25px; | |
| cursor: pointer; | |
| font-family: 'Arvo',sans-serif; | |
| font-weight: bold; | |
| color:#FFF; | |
| border-radius: 5px; | |
| border-style: solid; | |
| border-width: 0 0 6px 0; | |
| } | |
| button:hover{ | |
| top:2px; | |
| border-width: 0 0 4px 0; | |
| } | |
| button:active{ | |
| top:8px; | |
| padding-bottom: 8px; | |
| border-width: 2px 0 0 0; | |
| } | |
| .big{ | |
| font-size: 36px; | |
| } | |
| .medium{ | |
| font-size: 24px; | |
| } | |
| .small{ | |
| font-size: 18px; | |
| } | |
| .green{ | |
| background-color:#b1d927; | |
| border-color:#91b711; | |
| } | |
| .red{ | |
| background-color:#da5440; | |
| border-color:#bb3f2d; | |
| } | |
| .blue{ | |
| background-color:#5eb2e5; | |
| border-color:#5399c3; | |
| } | |
| .fancy{ | |
| color:#bA3c1c; | |
| border-color:#d45c2c; | |
| background: rgb(218,84,64); | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGE1NDQwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiOWQyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); | |
| background: -moz-linear-gradient(-45deg, rgba(218,84,64,1) 0%, rgba(251,157,35,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(218,84,64,1)), color-stop(100%,rgba(251,157,35,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(-45deg, rgba(218,84,64,1) 0%,rgba(251,157,35,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(-45deg, rgba(218,84,64,1) 0%,rgba(251,157,35,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(-45deg, rgba(218,84,64,1) 0%,rgba(251,157,35,1) 100%); /* IE10+ */ | |
| background: linear-gradient(135deg, rgba(218,84,64,1) 0%,rgba(251,157,35,1) 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da5440', endColorstr='#fb9d23',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ | |
| } | |
| .glass{ | |
| color:#CCC; | |
| box-shadow: 0px 0px 10px -2px #AAA; | |
| border-color:#e4e9ed; | |
| background: rgb(246,248,249); | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZjZmOGY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTVlYmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjZDdkZWUzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y1ZjdmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); | |
| background: -moz-linear-gradient(-45deg, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); | |
| background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); | |
| background: -webkit-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); | |
| background: -o-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); | |
| background: -ms-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); | |
| background: linear-gradient(135deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 ); | |
| progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 ); | |
| } | |
| .wood{ | |
| color:#7c4314; | |
| border-color:#8c5324; | |
| background-image: url(http://www.cosc.brocku.ca/Offerings/3P98/2005/LaBamba/tex_wood.jpg); | |
| } | |
| .line{ | |
| height:70px; | |
| line-height:90px; | |
| overflow:visible; | |
| } | |
| </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> | |
| </head> | |
| <body> | |
| <div style="text-align: center;"> | |
| <div class="line"> | |
| <button class="big green">Button | |
| </button> | |
| <button class="medium green">Button | |
| </button> | |
| <button class="small green">Button | |
| </button> | |
| </div> | |
| <br /> | |
| <div class="line"> | |
| <button class="big red">Button | |
| </button> | |
| <button class="medium red">Button | |
| </button> | |
| <button class="small red">Button | |
| </button> | |
| </div> | |
| <br /> | |
| <div class="line"> | |
| <button class="big blue">Button | |
| </button> | |
| <button class="medium blue">Button | |
| </button> | |
| <button class="small blue">Button | |
| </button> | |
| </div> | |
| <br /> | |
| <div class="line"> | |
| <button class="medium fancy">Fancy | |
| </button> | |
| <button class="medium glass">Glass | |
| </button> | |
| <button class="medium wood">Wood | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| (function() { | |
| /* | |
| Mohamed Moustafa, © July 2012. | |
| http://mmoustafa.com | |
| [email protected] | |
| Arvo font by Anton Koovit, Google WebFonts. | |
| - http://www.google.com/webfonts/specimen/Arvo | |
| Gradients generated using Colorzilla Ultimate Gradient Generator. | |
| - http://www.colorzilla.com/gradient-editor/ | |
| */ | |
| })(); | |
| </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="/mmoustafa/pen/2/2">Edit this Pen</a> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /* | |
| Mohamed Moustafa, © July 2012. | |
| http://mmoustafa.com | |
| [email protected] | |
| Arvo font by Anton Koovit, Google WebFonts. | |
| - http://www.google.com/webfonts/specimen/Arvo | |
| Gradients generated using Colorzilla Ultimate Gradient Generator. | |
| - http://www.colorzilla.com/gradient-editor/ | |
| */ |
This file contains hidden or 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
| <div style="text-align: center;"> | |
| <div class="line"> | |
| <button class="big green">Button | |
| </button> | |
| <button class="medium green">Button | |
| </button> | |
| <button class="small green">Button | |
| </button> | |
| </div> | |
| <br /> | |
| <div class="line"> | |
| <button class="big red">Button | |
| </button> | |
| <button class="medium red">Button | |
| </button> | |
| <button class="small red">Button | |
| </button> | |
| </div> | |
| <br /> | |
| <div class="line"> | |
| <button class="big blue">Button | |
| </button> | |
| <button class="medium blue">Button | |
| </button> | |
| <button class="small blue">Button | |
| </button> | |
| </div> | |
| <br /> | |
| <div class="line"> | |
| <button class="medium fancy">Fancy | |
| </button> | |
| <button class="medium glass">Glass | |
| </button> | |
| <button class="medium wood">Wood | |
| </button> | |
| </div> | |
| </div> | |
This file contains hidden or 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
| @import url(http://fonts.googleapis.com/css?family=Arvo:700); | |
| button{ | |
| display: inline; | |
| position: relative; | |
| top:-0px; | |
| min-width: 80px; | |
| min-height: 30px; | |
| padding: 10px 25px 10px 25px; | |
| cursor: pointer; | |
| font-family: 'Arvo',sans-serif; | |
| font-weight: bold; | |
| color:#FFF; | |
| border-radius: 5px; | |
| border-style: solid; | |
| border-width: 0 0 6px 0; | |
| } | |
| button:hover{ | |
| top:2px; | |
| border-width: 0 0 4px 0; | |
| } | |
| button:active{ | |
| top:8px; | |
| padding-bottom: 8px; | |
| border-width: 2px 0 0 0; | |
| } | |
| .big{ | |
| font-size: 36px; | |
| } | |
| .medium{ | |
| font-size: 24px; | |
| } | |
| .small{ | |
| font-size: 18px; | |
| } | |
| .green{ | |
| background-color:#b1d927; | |
| border-color:#91b711; | |
| } | |
| .red{ | |
| background-color:#da5440; | |
| border-color:#bb3f2d; | |
| } | |
| .blue{ | |
| background-color:#5eb2e5; | |
| border-color:#5399c3; | |
| } | |
| .fancy{ | |
| color:#bA3c1c; | |
| border-color:#d45c2c; | |
| background: rgb(218,84,64); | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGE1NDQwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiOWQyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); | |
| background: -moz-linear-gradient(-45deg, rgba(218,84,64,1) 0%, rgba(251,157,35,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(218,84,64,1)), color-stop(100%,rgba(251,157,35,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(-45deg, rgba(218,84,64,1) 0%,rgba(251,157,35,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(-45deg, rgba(218,84,64,1) 0%,rgba(251,157,35,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(-45deg, rgba(218,84,64,1) 0%,rgba(251,157,35,1) 100%); /* IE10+ */ | |
| background: linear-gradient(135deg, rgba(218,84,64,1) 0%,rgba(251,157,35,1) 100%); /* W3C */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da5440', endColorstr='#fb9d23',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ | |
| } | |
| .glass{ | |
| color:#CCC; | |
| box-shadow: 0px 0px 10px -2px #AAA; | |
| border-color:#e4e9ed; | |
| background: rgb(246,248,249); | |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZjZmOGY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTVlYmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjZDdkZWUzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y1ZjdmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); | |
| background: -moz-linear-gradient(-45deg, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); | |
| background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); | |
| background: -webkit-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); | |
| background: -o-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); | |
| background: -ms-linear-gradient(-45deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); | |
| background: linear-gradient(135deg, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=1 ); | |
| progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 ); | |
| } | |
| .wood{ | |
| color:#7c4314; | |
| border-color:#8c5324; | |
| background-image: url(http://www.cosc.brocku.ca/Offerings/3P98/2005/LaBamba/tex_wood.jpg); | |
| } | |
| .line{ | |
| height:70px; | |
| line-height:90px; | |
| overflow:visible; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment