Inspired by https://dribbble.com/shots/1663480-Sending-Complete
Forked from Irem Lopsum's Pen Send button with a transition.
Forked from Irem Lopsum's Pen Send button with a transition.
A Pen by Jordan Halvorsen on CodePen.
Created
November 3, 2015 22:34
-
-
Save anonymous/d853ca37ef6b07b5d2d6 to your computer and use it in GitHub Desktop.
Send button with a transition
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 class="btn btn-inside btn-boarder"><img src="https://i.cloudup.com/gBzAn-oW_S-2000x2000.png" width="64px" height="64px" id="plane"></button> | |
| <div class="bg"><img src="https://i.cloudup.com/2ZAX3hVsBE-3000x3000.png" id="bg" width="32px" height="32px" style="opacity:0;"></div> | |
| <div class="around around-boarder" onclick="ani(); anitwo();"></div> | |
| </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 ani(){ | |
| document.getElementById('plane').className ='animation'; | |
| } | |
| function anitwo(){ | |
| document.getElementById('bg').className ='animation2'; | |
| } |
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 { | |
| background: #FF7F50 no-repeat center center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| overflow: hidden; | |
| } | |
| .container { | |
| width: 500px; | |
| height: 500px; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| margin: auto; | |
| } | |
| .btn { | |
| width: 100px; | |
| height: 100px; | |
| border: none; | |
| color: inherit; | |
| background: none; | |
| display: inline-block; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 300; | |
| outline: none; | |
| position: absolute; | |
| -webkit-transition: all 0.3s; | |
| -moz-transition: all 0.3s; | |
| transition: all 0.3s; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| margin: auto; | |
| } | |
| .btn img{ | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| margin: auto; | |
| } | |
| .btn:after { | |
| content: ''; | |
| position: absolute; | |
| z-index: -1; | |
| -webkit-transition: all 0.3s; | |
| -moz-transition: all 0.3s; | |
| transition: all 0.3s; | |
| } | |
| .bg { | |
| height: 32px; | |
| width: 32px; | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| margin: auto; | |
| } | |
| .btn-boarder { | |
| border: 2px solid #fff; | |
| border-radius: 50%; | |
| } | |
| .animation { | |
| -webkit-transform: translate(100px, -100px); | |
| -moz-transform: translate(100px, -100px); | |
| -o-transform: translate(100px, -100px); | |
| -ms-transform: translate(100px, -100px); | |
| transform: translate(100px, -100px); | |
| -webkit-transition: all 0.3s linear; | |
| -moz-transition: all 0.3s linear; | |
| -o-transition: all 0.3s linear; | |
| transition: all 0.3s linear; | |
| } | |
| .animation2 { | |
| -webkit-animation: fadeIn 0.4s ease-out; | |
| -webkit-animation-iteration-count: 1; | |
| -webkit-animation-fill-mode: forwards; | |
| -webkit-animation-delay: 0.4s; | |
| -moz-animation: fadeIn 0.4s ease-out; | |
| -moz-animation-iteration-count: 1; | |
| -moz-animation-fill-mode: forwards; | |
| -moz-animation-delay: 0.4s; | |
| animation: fadeIn 0.4s ease-out; | |
| animation-iteration-count: 1; | |
| animation-fill-mode: forwards; | |
| animation-delay: 0.4s; | |
| } | |
| @-webkit-keyframes fadeIn { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadeIn { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| .around { | |
| width: 101px; | |
| height: 101px; | |
| border: none; | |
| color: inherit; | |
| background: none; | |
| cursor: pointer; | |
| display: inline-block; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-weight: 300; | |
| outline: none; | |
| position: absolute; | |
| -webkit-transition: all 0.3s; | |
| -moz-transition: all 0.3s; | |
| transition: all 0.3s; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| margin: auto; | |
| } | |
| .around:after { | |
| content: ''; | |
| position: absolute; | |
| z-index: -1; | |
| } | |
| .around-boarder { | |
| border: 120px solid #FF7F50; | |
| border-radius: 50%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment