A Pen by Chance Squires on CodePen.
Created
June 21, 2020 14:46
-
-
Save Yacine-22/f1855f142daaa83a8c22dd15e2ccb2fb to your computer and use it in GitHub Desktop.
Back to top
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
<button class="noselect"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 16.67l2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/></svg></button> |
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
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
height: 100vh; | |
overflow: hidden; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
background-color: #000000; | |
background-image: linear-gradient(147deg, #000000 0%, #434343 74%); | |
} | |
.noselect { | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
-webkit-tap-highlight-color: transparent; | |
} | |
button { | |
width: 75px; | |
height: 75px; | |
cursor: pointer; | |
background-color: #5de6de; | |
background-image: linear-gradient(315deg, #5de6de 0%, #b58ecc 74%); | |
border: none; | |
border-radius: 50%; | |
transition: 200ms; | |
} | |
button svg { | |
fill: white; | |
width: 30px; | |
height: 30px; | |
position: absolute; | |
transform: translateX(-50%) translateY(-50%); | |
} | |
button:before { | |
content: 'Back to Top'; | |
position: absolute; | |
transform: translateX(-50%) translateY(45px); | |
font-size: 15px; | |
transition: 200ms; | |
color: transparent; | |
font-weight: bold; | |
} | |
button:hover { | |
box-shadow: 0 1px 5px rgba(0,0,0,0.2); | |
width: 80px; | |
height: 80px; | |
} | |
button:hover::before { | |
color: #fff; | |
} | |
button:hover svg { | |
animation: bounce 2s infinite linear; | |
} | |
@keyframes bounce { | |
0% {transform: translateX(-50%) translateY(-50%)} | |
25% {transform: translateX(-50%) translateY(-65%)} | |
50% {transform: translateX(-50%) translateY(-50%)} | |
75% {transform: translateX(-50%) translateY(-35%)} | |
100% {transform: translateX(-50%) translateY(-50%)} | |
} | |
button:focus { | |
outline: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment