Uses CSS
- linear-gradient
- box-shadow
Check out an SVG button
Last active
September 14, 2018 09:48
-
-
Save pbogden/7669ca97471e7a7a7e33 to your computer and use it in GitHub Desktop.
html button
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> | |
| <meta charset="utf-8"> | |
| <title>html button</title> | |
| <body> | |
| <style> | |
| #button { | |
| position: absolute; | |
| top: 200px; | |
| left: 200px; | |
| } | |
| /* plain button */ | |
| .btn { | |
| color: #ffffff; /* text color */ | |
| font-family: Helvetica, sans serif; | |
| font-size: 60px; | |
| padding: 10px 20px 10px 20px; /* top, right, bottom, left */ | |
| border: solid #1f628d 2px; | |
| border-radius: 12px; | |
| text-decoration: none; /* underline, overline, line-through or blink */ | |
| } | |
| /* fancy button */ | |
| .btn { | |
| /* linear-gradient */ | |
| background: #3cb0fd; /* For browsers that don't support graidents */ | |
| background: -webkit-linear-gradient(top, #3498db, #2980b9); /* For Safari 5.1 to 6.0 */ | |
| background: -moz-linear-gradient(top, #3498db, #2980b9); /* For Firefox 3.6 to 15 */ | |
| background: -o-linear-gradient(top, #3498db, #2980b9); /* For Opera 11.1 to 12.0 */ | |
| background: linear-gradient(to bottom, #3498db, #2980b9); /* Standard syntax */ | |
| /* box-shadow */ | |
| -webkit-box-shadow: 5px 5px 3px #666666; | |
| -moz-box-shadow: 5px 5px 3px #666666; | |
| box-shadow: 5px 5px 3px #666666; /* offset-x, offset-y, blur-radius, color */ | |
| } | |
| .btn:hover { | |
| background: -webkit-linear-gradient(top, #3cb0fd, #3498db); | |
| background: -moz-linear-gradient(top, #3cb0fd, #3498db); | |
| background: -o-linear-gradient(top, #3cb0fd, #3498db); | |
| background: linear-gradient(to bottom, #3cb0fd, #3498db); | |
| } | |
| /* eliminate shadow when clicked */ | |
| .btn:active { | |
| -webkit-box-shadow: none; | |
| -moz-box-shadow: none; | |
| box-shadow: none; | |
| } | |
| /* prevent text selection */ | |
| a { | |
| user-select: none; | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| -ms-user-select: none; | |
| } | |
| </style> | |
| <body> | |
| <div id="button"> | |
| <a class="btn" href="">Click me</a> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment