A nice and simple CSS3 only button, built using box-shadow, text-shadow and gradients.
In the css i've broken it down so you can easily see how its built.
A Pen by Will Paige on CodePen.
Created
February 10, 2022 08:21
-
-
Save HeNy007/30354999c2e5004a2d3be38a6ddc49bd to your computer and use it in GitHub Desktop.
CSS3 Animated Button/Key
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> | |
| <div class="container"> | |
| <div class="highlight"></div> | |
| <span> | |
| <a href="#" class="button grad transition">PRESS ME!</a> | |
| </span> | |
| </div> | |
| </body> |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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
| /********************* | |
| I"VE BROKEN THE STYLING DOWN SO YOU CAN SEE HOW ITS BUILT UP | |
| USING GRADIENTS, TEXT-SHADOWS AND BOX-SHADOWS | |
| *********************/ | |
| html { | |
| background: #3d3d47; | |
| } | |
| .container { | |
| margin: 80px auto; | |
| text-align: center; | |
| } | |
| span { | |
| width: 250px; | |
| margin: 0 auto; | |
| display: block; | |
| } | |
| .button { | |
| /* POSITIONING */ | |
| padding: 30px; | |
| top: -200px; | |
| border-radius: 8px; | |
| position: relative; | |
| float: left; | |
| /* BUTTON STYLING */ | |
| border-top: 1px solid #fff; | |
| box-shadow: 0 5px 8px #002851, 0 8px 0 #002851, -2px 1px 0 #003872, 2px 1px 0 #003872, 0px 8px 10px #000, 0 10px 30px #1b1b1b; | |
| /* FONT STYLING */ | |
| font: bold 30px 'Trebuchet Ms', helvetica; | |
| letter-spacing: 4px; | |
| text-decoration: none; | |
| text-shadow: -1px -1px 1px #00172e,1px 1px 1px #a1cfff; | |
| color: #14467a; | |
| } | |
| .button:hover { | |
| /* BUTTON SHADOW */ | |
| box-shadow: 0 6px 6px #002851, 0 6px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 7px 8px #000, 0 7px 20px #1b1b1b; | |
| } | |
| .button:active { | |
| border-top: 1px solid #cde4fc; | |
| /* BUTTON SHADOW */ | |
| box-shadow: 0 0px 0px #002851, 0 3px 0 #002851, 0px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 4px #000, 0 2px 10px #1b1b1b; | |
| } | |
| /* BLUE GRADIENT ON BUTTON */ | |
| .grad { | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,184,255,1)), color-stop(100%,rgba(64,150,238,1))); | |
| background: linear-gradient(to bottom, rgba(114,184,255,1) 0%,rgba(64,150,238,1) 100%); | |
| } | |
| /* ANIMATE THE BUTTON */ | |
| .transition, | |
| .transition:hover, | |
| .transition:active{ | |
| -webkit-transition: all 0.3s ease-in-out; | |
| -moz-transition: all 0.3s ease-in-out; | |
| -o-transition: all 0.3s ease-in-out; | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .highlight { | |
| position: relative; | |
| margin: -200px auto 0 auto; | |
| width: 500px; | |
| height: 400px; | |
| opacity: 0.4; | |
| background: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); | |
| background: -webkit-gradient(radial, top top, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); | |
| background: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,0.3) 0px,rgba(255,255,255,0) 275px); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment