A Pen by Veronica Highsmith on CodePen.
Created
June 30, 2016 09:06
-
-
Save highsmithcodes/70c6b78722d5a07a3729677b75f0195e to your computer and use it in GitHub Desktop.
Test 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
| <html lang="en"> | |
| <head> | |
| <meta name="author" content="www.twitter.com/cheeriottis"> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="css/core.css"> | |
| </head> | |
| <body> | |
| <a href="#" class="action-button shadow animate blue">This</a> | |
| <br> | |
| <a href="#" class="action-button shadow animate red">Is</a> | |
| <br> | |
| <a href="#" class="action-button shadow animate green">A</a> | |
| <br> | |
| <a href="#" class="action-button shadow animate yellow">Test</a> | |
| <br> | |
| </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
| body{ | |
| margin-top: 100%; | |
| padding: 50px; | |
| margin: auto; | |
| width: 30%; | |
| } | |
| .animate{ | |
| transition: all 0.1s; | |
| -webkit-transition: all 0.1s; | |
| } | |
| .action-button{ | |
| position: relative; | |
| padding: 10px 40px; | |
| margin: 0px 10px 10px 0px; | |
| float: left; | |
| border-radius: 10px; | |
| font-family: 'Roboto Mono'; | |
| font-size: 25px; | |
| color: #FFF; | |
| text-decoration: none; | |
| } | |
| .blue{ | |
| background-color: #3498DB; | |
| border-bottom: 5px solid #2980B9; | |
| text-shadow: 0px -2px #2980B9; | |
| } | |
| .red{ | |
| background-color: #E74C3C; | |
| border-bottom: 5px solid #BD3E31; | |
| text-shadow: 0px -2px #BD3E31; | |
| } | |
| .green{ | |
| background-color: #82BF56; | |
| border-bottom: 5px solid #669644; | |
| text-shadow: 0px -2px #669644; | |
| } | |
| .yellow{ | |
| background-color: #F2CF66; | |
| border-bottom: 5px solid #D1B358; | |
| text-shadow: 0px -2px #D1B358; | |
| } | |
| .action-button:active{ | |
| transform: translate(0px,5px); | |
| -webkit-transform: translate(0px,5px); | |
| border-bottom: 1px solid; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment