Creative Button Animation Effects | Only Using HTML & CSS
A Pen by Ahmad Emran on CodePen.
Created
February 1, 2023 12:33
-
-
Save ilifeup/2664e31883abfd22e6c88c859208d730 to your computer and use it in GitHub Desktop.
Creative Button Animation Effects | Only Using HTML & CSS
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
| <div class="wrapper"> | |
| <button> | |
| Hover Here! | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </button> | |
| </div> | |
| <footer> | |
| <p> | |
| Created with <i class="fa fa-heart"></i> by | |
| <a target="_blank" href="https://codepen.io/ahmadbassamemran/">Ahmad Emran</a> | |
| Follow me : | |
| <a target="_blank" href="https://www.instagram.com/ahmadbassamemran/"><i class="fab fa-instagram"></i></a> | |
| <a target="_blank" href="https://www.linkedin.com/in/ahmademarn/"><i class="fab fa-linkedin"></i></a> | |
| <a target="_blank" href="https://codepen.io/ahmadbassamemran/"><i class="fab fa-codepen"></i></a> | |
| <a target="_blank" href="https://dev.to/ahmadbassamemran"><i class="fab fa-dev"></i></a> | |
| <a target="_blank" href="https://twitter.com/ahmadbassamemra"><i class="fab fa-twitter-square"></i></a> | |
| </p> | |
| </footer> | |
| <div class="youtubeBtn"> | |
| <a target="_blank" href="https://www.youtube.com/AhmadEmran?sub_confirmation=1"> | |
| <span>Watch on YouTube</span> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> |
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{ | |
| padding:0px; | |
| margin: 0px; | |
| background-color: #6D214F; | |
| width:100%; | |
| height:100vh; | |
| } | |
| .wrapper{ | |
| position: absolute; | |
| top:50%; | |
| left:50%; | |
| transform: translate(-50%, -50%); | |
| width: fit-content; | |
| height:auto; | |
| } | |
| button{ | |
| width:200px; | |
| height:70px; | |
| background: linear-gradient(to left top, #c32c71 50%, #b33771 50%); | |
| border-style: none; | |
| color:#fff; | |
| font-size: 23px; | |
| letter-spacing: 3px; | |
| font-family: 'Lato'; | |
| font-weight: 600; | |
| outline: none; | |
| cursor: pointer; | |
| position: relative; | |
| padding: 0px; | |
| overflow: hidden; | |
| transition: all .5s; | |
| box-shadow: 0px 1px 2px rgba(0,0,0,.2); | |
| } | |
| button span{ | |
| position: absolute; | |
| display: block; | |
| } | |
| button span:nth-child(1){ | |
| height: 3px; | |
| width:200px; | |
| top:0px; | |
| left:-200px; | |
| background: linear-gradient(to right, rgba(0,0,0,0), #f6e58d); | |
| border-top-right-radius: 1px; | |
| border-bottom-right-radius: 1px; | |
| animation: span1 2s linear infinite; | |
| animation-delay: 1s; | |
| } | |
| @keyframes span1{ | |
| 0%{ | |
| left:-200px | |
| } | |
| 100%{ | |
| left:200px; | |
| } | |
| } | |
| button span:nth-child(2){ | |
| height: 70px; | |
| width: 3px; | |
| top:-70px; | |
| right:0px; | |
| background: linear-gradient(to bottom, rgba(0,0,0,0), #f6e58d); | |
| border-bottom-left-radius: 1px; | |
| border-bottom-right-radius: 1px; | |
| animation: span2 2s linear infinite; | |
| animation-delay: 2s; | |
| } | |
| @keyframes span2{ | |
| 0%{ | |
| top:-70px; | |
| } | |
| 100%{ | |
| top:70px; | |
| } | |
| } | |
| button span:nth-child(3){ | |
| height:3px; | |
| width:200px; | |
| right:-200px; | |
| bottom: 0px; | |
| background: linear-gradient(to left, rgba(0,0,0,0), #f6e58d); | |
| border-top-left-radius: 1px; | |
| border-bottom-left-radius: 1px; | |
| animation: span3 2s linear infinite; | |
| animation-delay: 3s; | |
| } | |
| @keyframes span3{ | |
| 0%{ | |
| right:-200px; | |
| } | |
| 100%{ | |
| right: 200px; | |
| } | |
| } | |
| button span:nth-child(4){ | |
| height:70px; | |
| width:3px; | |
| bottom:-70px; | |
| left:0px; | |
| background: linear-gradient(to top, rgba(0,0,0,0), #f6e58d); | |
| border-top-right-radius: 1px; | |
| border-top-left-radius: 1px; | |
| animation: span4 2s linear infinite; | |
| animation-delay: 4s; | |
| } | |
| @keyframes span4{ | |
| 0%{ | |
| bottom: -70px; | |
| } | |
| 100%{ | |
| bottom:70px; | |
| } | |
| } | |
| button:hover{ | |
| transition: all .5s; | |
| transform: rotate(-3deg) scale(1.1); | |
| box-shadow: 0px 3px 5px rgba(0,0,0,.4); | |
| } | |
| button:hover span{ | |
| animation-play-state: paused; | |
| } | |
| /* footer */ | |
| footer { | |
| background-color: #222; | |
| color: #fff; | |
| font-size: 14px; | |
| bottom: 0; | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| z-index: 999; | |
| } | |
| footer p { | |
| margin: 10px 0; | |
| font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; | |
| } | |
| footer .fa-heart{ | |
| color: red; | |
| } | |
| footer .fa-dev{ | |
| color: #fff; | |
| } | |
| footer .fa-twitter-square{ | |
| color:#1da0f1; | |
| } | |
| footer .fa-instagram{ | |
| color: #f0007c; | |
| } | |
| fotter .fa-linkedin{ | |
| color:#0073b1; | |
| } | |
| footer .fa-codepen{ | |
| color:#fff | |
| } | |
| footer a { | |
| color: #3c97bf; | |
| text-decoration: none; | |
| margin-right:5px; | |
| } | |
| .youtubeBtn{ | |
| position: fixed; | |
| left: 50%; | |
| transform:translatex(-50%); | |
| bottom: 45px; | |
| cursor: pointer; | |
| transition: all .3s; | |
| vertical-align: middle; | |
| text-align: center; | |
| display: inline-block; | |
| } | |
| .youtubeBtn i{ | |
| font-size:20px; | |
| float:left; | |
| } | |
| .youtubeBtn a{ | |
| color:#ff0000; | |
| text-shadow: 0px 2px 5px rgba(0,0,0,.5); | |
| animation: youtubeAnim 1000ms linear infinite; | |
| float:right; | |
| } | |
| .youtubeBtn a:hover{ | |
| color:#c9110f; | |
| transition:all .3s ease-in-out; | |
| text-shadow: none; | |
| } | |
| .youtubeBtn i:active{ | |
| transform:scale(.9); | |
| transition:all .3s ease-in-out; | |
| } | |
| .youtubeBtn span{ | |
| font-family: 'Lato'; | |
| font-weight: bold; | |
| color: #fff; | |
| display: block; | |
| font-size: 12px; | |
| float: right; | |
| line-height: 20px; | |
| padding-left: 5px; | |
| } | |
| @keyframes youtubeAnim{ | |
| 0%,100%{ | |
| color:#c9110f; | |
| } | |
| 50%{ | |
| color:#ff0000; | |
| } | |
| } | |
| /* footer */ |
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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment