Instantly share code, notes, and snippets.
Created
March 22, 2021 11:42
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save shellkore/bdb9e980fd5053db2b3d883ed6dfd3b3 to your computer and use it in GitHub Desktop.
Cool-waving-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
@import url("https://fonts.googleapis.com/css?family=Lato:400,100,300,700,100italic,300italic,400italic,700italic,900,900italic"); | |
@import url("https://fonts.googleapis.com/css?family=Raleway:400,700"); | |
body { | |
padding: 0; | |
margin: 0; | |
} | |
body .btn-bg { | |
width: 100%; | |
height: 100vh; | |
min-height: 300px; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
align-items: center; | |
} | |
body .btn-bg.Ocean { | |
background: #239ed3; | |
} | |
body .btn-bg.Ocean .btn-group .Debris button { | |
color: #fff; | |
overflow: hidden; | |
position: relative; | |
border-radius: 5px; | |
border: 5px solid #fff; | |
background: transparent; | |
transition: all 2s ease; | |
} | |
body .btn-bg.Ocean .btn-group .Debris button span { | |
position: absolute; | |
content: ''; | |
top: 1.5em; | |
left: 50%; | |
width: 20em; | |
height: 20em; | |
opacity: 0.5; | |
background: #fff; | |
margin-left: -10em; | |
border-radius: 42.5%; | |
transform-origin: 50% 50%; | |
animation: wave 5s infinite linear; | |
transition: all 2s ease, top 1.5s ease; | |
} | |
body .btn-bg.Ocean .btn-group .Debris button:hover { | |
color: #50514f; | |
border-color: #50514f; | |
transition: all 2s ease; | |
} | |
body .btn-bg.Ocean .btn-group .Debris button:hover span { | |
opacity: 1; | |
top: 0.5em; | |
background-color: #50514f; | |
transition: all 2s ease, top 1.5s ease; | |
} | |
body .btn-bg.Ocean .btn-group .Coral button { | |
color: #fff; | |
overflow: hidden; | |
position: relative; | |
border-radius: 5px; | |
border: 5px solid #fff; | |
background: transparent; | |
transition: all 1s ease; | |
} | |
body .btn-bg.Ocean .btn-group .Coral button span { | |
position: absolute; | |
content: ''; | |
top: 1.75em; | |
left: 50%; | |
width: 20em; | |
height: 20em; | |
margin-left: -10em; | |
border-radius: 42.5%; | |
transform-origin: 50% 50%; | |
transition: all 1s ease, top 1.5s ease; | |
} | |
body .btn-bg.Ocean .btn-group .Coral button .Coralwave1 { | |
background: #ffb733; | |
animation: smallwave 3s infinite linear; | |
} | |
body .btn-bg.Ocean .btn-group .Coral button .Coralwave2 { | |
background: #f97890; | |
animation: smallwave 4s infinite linear; | |
} | |
body .btn-bg.Ocean .btn-group .Coral button .Coralwave3 { | |
background: #4ab3e1; | |
animation: smallwave 5s infinite linear; | |
} | |
body .btn-bg.Ocean .btn-group .Coral button:hover { | |
transition: all 1s ease; | |
} | |
body .btn-bg.Ocean .btn-group .Coral button:hover span { | |
top: 0.5em; | |
transition: all 1s ease, top 1.5s ease; | |
} | |
.btn-group { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
align-items: center; | |
max-width: 1200px; | |
} | |
@media screen and (max-width: 480px) { | |
.btn-group { | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
align-items: center; | |
} | |
} | |
.btn { | |
margin: 0 30px 30px 30px; | |
display: block; | |
} | |
.btn-info { | |
margin-bottom: 10px; | |
text-align: center; | |
font-family: 'Lato'; | |
text-transform: uppercase; | |
letter-spacing: 0.1em; | |
font-weight: 600; | |
font-size: 3.5em; | |
color: #fff; | |
} | |
.btn-mention { | |
margin-bottom: 70px; | |
text-align: center; | |
font-family: 'Lato'; | |
letter-spacing: 0.1em; | |
font-size: 1.1em; | |
color: #fff; | |
} | |
.btn-mention span { | |
font-size: 1.2em; | |
font-weight: 600; | |
} | |
button { | |
cursor: pointer; | |
overflow: visible; | |
outline: none; | |
color: #fff; | |
position: relative; | |
letter-spacing: 0.1em; | |
font-weight: 400; | |
padding: 1rem 3rem 1rem 3rem; | |
text-transform: uppercase; | |
font-family: "Lato"; | |
font-size: 1.5em; | |
} | |
button a { | |
text-decoration: none; | |
} | |
@-moz-keyframes wave { | |
0% { | |
transform: rotate(0deg) scale(1); | |
} | |
50% { | |
transform: rotate(180deg) scale(0.975); | |
} | |
100% { | |
transform: rotate(360deg) scale(1); | |
} | |
} | |
@-webkit-keyframes wave { | |
0% { | |
transform: rotate(0deg) scale(1); | |
} | |
50% { | |
transform: rotate(180deg) scale(0.975); | |
} | |
100% { | |
transform: rotate(360deg) scale(1); | |
} | |
} | |
@-o-keyframes wave { | |
0% { | |
transform: rotate(0deg) scale(1); | |
} | |
50% { | |
transform: rotate(180deg) scale(0.975); | |
} | |
100% { | |
transform: rotate(360deg) scale(1); | |
} | |
} | |
@keyframes wave { | |
0% { | |
transform: rotate(0deg) scale(1); | |
} | |
50% { | |
transform: rotate(180deg) scale(0.975); | |
} | |
100% { | |
transform: rotate(360deg) scale(1); | |
} | |
} | |
@-moz-keyframes smallwave { | |
0% { | |
transform: rotate(0deg) scale(1); | |
opacity: 0.8; | |
} | |
50% { | |
transform: rotate(180deg) scale(0.95); | |
opacity: 0.25; | |
} | |
100% { | |
transform: rotate(360deg) scale(1); | |
opacity: 0.8; | |
} | |
} | |
@-webkit-keyframes smallwave { | |
0% { | |
transform: rotate(0deg) scale(1); | |
opacity: 0.8; | |
} | |
50% { | |
transform: rotate(180deg) scale(0.95); | |
opacity: 0.25; | |
} | |
100% { | |
transform: rotate(360deg) scale(1); | |
opacity: 0.8; | |
} | |
} | |
@-o-keyframes smallwave { | |
0% { | |
transform: rotate(0deg) scale(1); | |
opacity: 0.8; | |
} | |
50% { | |
transform: rotate(180deg) scale(0.95); | |
opacity: 0.25; | |
} | |
100% { | |
transform: rotate(360deg) scale(1); | |
opacity: 0.8; | |
} | |
} | |
@keyframes smallwave { | |
0% { | |
transform: rotate(0deg) scale(1); | |
opacity: 0.8; | |
} | |
50% { | |
transform: rotate(180deg) scale(0.95); | |
opacity: 0.25; | |
} | |
100% { | |
transform: rotate(360deg) scale(1); | |
opacity: 0.8; | |
} | |
} |
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
<!DOCTYPE html> | |
<html lang="en" > | |
<head> | |
<meta charset="UTF-8"> | |
<title>CodePen - animation button#3-hover effect</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> | |
<link rel="stylesheet" href="./button.css"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> | |
</head> | |
<body> | |
<!-- partial:index.partial.html --> | |
<body> | |
<div class="btn-bg Ocean"> | |
<div class="btn-info">Ocean</div> | |
<div class="btn-mention">too much <span>Debris</span>, too few <span>Coral</span></div> | |
<div class="btn-group"> | |
<div class="btn Debris"> | |
<button href="#">debris<span class="one"></span></button> | |
</div> | |
<div class="btn Coral"> | |
<button href="#">coral<span class="Coralwave1"></span><span class="Coralwave2"></span><span class="Coralwave3"></span></button> | |
</div> | |
</div> | |
</div> | |
</body> | |
<!-- partial --> | |
<script src="./script.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment