Inspired by the shot of Colin Garven : https://dribbble.com/shots/1426764-Submit-Button
A Pen by Valentin Galmand on CodePen.
Created
March 17, 2023 04:59
-
-
Save ORZUgitHub/790f86482af94c0feb018f4d90b11a92 to your computer and use it in GitHub Desktop.
animation submit 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
| <div class="container"> | |
| <button id="button"></button> | |
| </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
| $(function() { | |
| $( "#button" ).click(function() { | |
| $( "#button" ).addClass( "onclic", 250, validate); | |
| }); | |
| function validate() { | |
| setTimeout(function() { | |
| $( "#button" ).removeClass( "onclic" ); | |
| $( "#button" ).addClass( "validate", 450, callback ); | |
| }, 2250 ); | |
| } | |
| function callback() { | |
| setTimeout(function() { | |
| $( "#button" ).removeClass( "validate" ); | |
| }, 1250 ); | |
| } | |
| }); |
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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.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
| $green: #1ECD97; | |
| $gray: #bbbbbb; | |
| * { | |
| font-family: 'Roboto', sans-serif; | |
| } | |
| .container { | |
| position: absolute; | |
| top:50%; | |
| left:50%; | |
| margin-left: -65px; | |
| margin-top: -20px; | |
| width: 130px; | |
| height: 40px; | |
| text-align: center; | |
| } | |
| button { | |
| outline:none; | |
| height: 40px; | |
| text-align: center; | |
| width: 130px; | |
| border-radius:40px; | |
| background: #fff; | |
| border: 2px solid $green; | |
| color:$green; | |
| letter-spacing:1px; | |
| text-shadow:0; | |
| font:{ | |
| size:12px; | |
| weight:bold; | |
| } | |
| cursor: pointer; | |
| transition: all 0.25s ease; | |
| &:hover { | |
| color:white; | |
| background: $green; | |
| } | |
| &:active { | |
| //letter-spacing: 2px; | |
| letter-spacing: 2px ; | |
| } | |
| &:after { | |
| content:"SUBMIT"; | |
| } | |
| } | |
| .onclic { | |
| width: 40px; | |
| border-color:$gray; | |
| border-width:3px; | |
| font-size:0; | |
| border-left-color:$green; | |
| animation: rotating 2s 0.25s linear infinite; | |
| &:after { | |
| content:""; | |
| } | |
| &:hover { | |
| color:$green; | |
| background: white; | |
| } | |
| } | |
| .validate { | |
| font-size:13px; | |
| color: white; | |
| background: $green; | |
| &:after { | |
| font-family:'FontAwesome'; | |
| content:"\f00c"; | |
| } | |
| } | |
| @keyframes rotating { | |
| from { | |
| transform: rotate(0deg); | |
| } | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } |
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
| <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> | |
| <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment