Shiny CSS rounded buttons
A Pen by Pali Madra on CodePen.
Created
March 28, 2015 20:05
-
-
Save f8lrebel/6b0b7d9473e09d68cb20 to your computer and use it in GitHub Desktop.
Shiny CSS rounded buttons
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
| <html><body><span class="btn-blue"></span><span class="btn-red"></span><span class="btn-green"></span><span class="btn-yellow"></span></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
| body { | |
| background: none repeat scroll 0 0 #71AFDF; | |
| text-align: center; | |
| margin-top: 50px; | |
| } | |
| span { | |
| margin: 0 10px; | |
| } | |
| .btn-blue { | |
| background: #108fe8; | |
| border: 3px solid #fff; | |
| border-radius: 100%; | |
| box-shadow: 0 -2px 0 3px #0d72b8 inset, 0 5px 5px rgba(3, 25, 41, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; | |
| cursor: pointer; | |
| display: inline-block; | |
| height: 75px; | |
| width: 75px; | |
| } | |
| .btn-blue:hover { | |
| background: #333333; | |
| box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; | |
| } | |
| .btn-red { | |
| background: #e53030; | |
| border: 3px solid #fff; | |
| border-radius: 100%; | |
| box-shadow: 0 -2px 0 3px #c91919 inset, 0 5px 5px rgba(65, 8, 8, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; | |
| cursor: pointer; | |
| display: inline-block; | |
| height: 75px; | |
| width: 75px; | |
| } | |
| .btn-red:hover { | |
| background: #333333; | |
| box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; | |
| } | |
| .btn-green { | |
| background: #0ec518; | |
| border: 3px solid #fff; | |
| border-radius: 100%; | |
| box-shadow: 0 -2px 0 3px #0b9512 inset, 0 5px 5px rgba(0, 7, 1, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; | |
| cursor: pointer; | |
| display: inline-block; | |
| height: 75px; | |
| width: 75px; | |
| } | |
| .btn-green:hover { | |
| background: #333333; | |
| box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; | |
| } | |
| .btn-yellow { | |
| background: #ffc334; | |
| border: 3px solid #fff; | |
| border-radius: 100%; | |
| box-shadow: 0 -2px 0 3px #ffb401 inset, 0 5px 5px rgba(103, 73, 0, 0.17), 0 15px rgba(255, 255, 255, 0.25) inset; | |
| cursor: pointer; | |
| display: inline-block; | |
| height: 75px; | |
| width: 75px; | |
| } | |
| .btn-yellow:hover { | |
| background: #333333; | |
| box-shadow: 0 -2px 0 3px #1a1a1a inset, 0 5px 5px rgba(0, 0, 0, 0.17), 0 15px rgba(255, 255, 255, 0.32) inset; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment