Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Animations: Obvious CTA Buttons
.main-content
.item.button-jittery(style="--bg-color: #f1c40f;")
button Click Me!
.name Subtlety
.item.button-pulse(style="--bg-color: #e67e22")
.button__wrapper
.pulsing
button Click Me!
.name Dubstep
.item.button-typewriter(style="--bg-color: #e74c3c")
.button__wrapper
button
p Click Me!
.name Typewriter
.item.button-pressure(style="--bg-color: #9b59b6")
button Click Me!
marquee(scrollamount="12")
span Your friends would do it.
span Your mum would be proud.
span Your partner would be so happy.
span Your cat would love you for it.
.name Social Pressure
.item.button-hand(style="--bg-color: #3498db")
button Click Me!
.hands
.name Handsy
.item.button-100(style="--bg-color:#2ecc71")
button Click Me!
- for (var i=1; i<4; i++)
.emoji
.name You're ๐Ÿ’ฏ
.item.button-parrot(style="--bg-color: #2c3e50")
button Click Me!
- for (var i=1; i<7; i++)
.parrot
.name Encouragement
.item.button-rainbow(style="--bg-color: #ecf0f1")
button Click Me!
.rainbow
.name Rainbow
.item.footer(style="--bg-color: #7f8c8d")
.explanation
| Part of the
a(href="https://codepen.io/collection/XJNKLz/" target="_blank") CSS Animations collection here
| .
footer
a(href="https://twitter.com/meowlivia_" target="_blank")
i.icon-social-twitter.icons
a(href="https://github.com/oliviale" target="_blank")
i.icon-social-github.icons
a(href="https://dribbble.com/oliviale" target="_blank")
i.icon-social-dribbble.icons
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
body {
color: #fff;
font-family: "Rubik", sans-serif;
}
.item.footer {
flex-wrap: wrap;
padding: 5rem;
text-align: center;
font-size: 18px;
line-height: 1.7;
grid-column: span 1;
@media screen and (min-width:823px) and (max-width:1223px) {
grid-column: span 2;
}
a {
text-decoration: none;
color: #fff;
padding: 3px 0;
border-bottom: 1px dashed;
&:hover {
border-bottom: 1px solid;
}
}
}
footer {
margin-top: 1.5rem;
a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
border: 1px dashed #fff;
color: #fff;
margin: 5px;
&:hover {
background: rgba(255, 255, 255, 0.1);
}
.icons {
margin-top: 8px;
display: inline-block;
font-size: 20px;
&:before {
position: relative;
}
}
}
}
* {
box-sizing: border-box;
&:before,
&:after {
content: "";
position: absolute;
}
}
.main-content {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
.item {
display: grid;
grid-template-rows: 1fr min-content;
align-items: center;
justify-content: center;
height: 50vh;
flex-wrap: wrap;
background: var(--bg-color);
&:not(.footer) {
padding-top: 1rem;
}
}
}
button {
background: transparent;
color: #fff;
border: 3px solid #fff;
border-radius: 50px;
padding: 0.8rem 2rem;
font: 24px "Margarine", sans-serif;
outline: none;
cursor: pointer;
position: relative;
transition: 0.2s ease-in-out;
letter-spacing: 2px;
}
.name {
width: 100%;
text-align: center;
padding: 0 0 3rem;
font: 500 14px 'Rubik', sans-serif;
letter-spacing: .5px;
text-transform: uppercase;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.button__wrapper {
display: inline-block;
position: relative;
width: 200px;
height: 65px;
display: flex;
justify-content: center;
align-items: center;
}
.button-pulse {
button {
background: var(--bg-color);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.button__wrapper:hover .pulsing {
&:before {
animation: pulsing 0.2s linear infinite;
}
&:after {
animation: pulsing1 0.2s linear infinite;
}
}
}
.pulsing {
width: 99%;
height: 99%;
border-radius: 50px;
z-index: 1;
position: relative;
&:before,
&:after {
width: 100%;
height: 100%;
border: inherit;
top: 0;
left: 0;
z-index: 0;
background: #fff;
border-radius: inherit;
animation: pulsing 2.5s linear infinite;
}
&:after {
animation: pulsing1 2.5s linear infinite;
}
}
@keyframes pulsing {
0% {
opacity: 1;
transform: scaleY(1) scaleX(1);
}
20% {
opacity: 0.5;
}
70% {
opacity: 0.2;
transform: scaleY(1.8) scaleX(1.4);
}
80% {
opacity: 0;
transform: scaleY(1.8) scaleX(1.4);
}
90% {
opacity: 0;
transform: scaleY(1) scaleX(1);
}
}
@keyframes pulsing1 {
0% {
opacity: 1;
transform: scaleY(1) scaleX(1);
}
20% {
opacity: 0.5;
}
70% {
opacity: 0.2;
transform: scaleY(1.3) scaleX(1.15);
}
80% {
opacity: 0;
transform: scaleY(1.3) scaleX(1.15);
}
90% {
opacity: 0;
transform: scaleY(1) scaleX(1);
}
}
.button-typewriter {
button {
width: 100%;
height: 100%;
}
p {
animation: typing 4s steps(12) infinite;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.button__wrapper:hover p {
animation: blink 0.3s infinite;
}
}
@keyframes typing {
0% {
width: 0;
}
50% {
width: 100%;
}
55%,
65%,
75% {
opacity: 1;
}
60%,
70% {
opacity: 0;
}
80% {
width: 100%;
}
100% {
width: 0;
}
}
.button-parrot {
.parrot {
position: absolute;
width: 60px;
text-align: center;
animation: blink 0.8s infinite;
color: transparent;
&:before {
content: "Click Me!";
}
&:nth-child(1) {
top: -30px;
left: -40px;
font: 12px/1 "Margarine", sans-serif;
transform: rotate(-20deg);
animation-duration: 0.5s;
}
&:nth-child(2) {
font: 12px/1 "Margarine", sans-serif;
right: -40px;
top: -20px;
transform: rotate(15deg);
animation-duration: 0.3s;
}
&:nth-child(3) {
font: 16px/1 "Margarine", sans-serif;
top: -60px;
left: 15px;
transform: rotate(10deg);
animation-duration: 1s;
}
&:nth-child(4) {
font: 18px/1 "Margarine", sans-serif;
top: -70px;
left: 95px;
transform: rotate(2deg);
animation-duration: 0.7s;
}
&:nth-child(5) {
font: 14px/1 "Margarine", sans-serif;
top: 80px;
left: 105px;
transform: rotate(-20deg);
animation-duration: 0.8s;
}
&:nth-child(6) {
font: 12px/1 "Margarine", sans-serif;
top: 80px;
left: 5px;
transform: rotate(10deg);
animation-duration: 1.2s;
}
}
button:hover .parrot:before {
content: "Do it!";
width: 70px;
}
}
@keyframes blink {
25%,
75% {
color: transparent;
}
40%,
60% {
color: #fff;
}
}
.button-hand button {
&:before {
content: "๐Ÿ‘‡";
font-size: 60px;
transform: scaleX(-1);
right: 0px;
top: -68px;
animation: up-down 1s infinite;
}
.hands {
&:before,
&:after {
content: "๐Ÿ‘‡";
font-size: 40px;
opacity: 0;
transition: 0.4s ease-in-out;
}
&:before {
transform: rotate(-60deg);
left: -45px;
top: -10px;
}
&:after {
transform: rotate(170deg);
right: 30px;
top: 50px;
}
}
&:hover .hands {
&:before {
opacity: 1;
left: -35px;
}
&:after {
opacity: 1;
top: 40px;
}
}
}
@keyframes up-down {
50% {
margin-top: -20px;
}
}
.button-100 {
.emoji {
position: absolute;
top: -45px;
left: 0;
width: 35px;
height: 35px;
overflow: hidden;
&:before {
content: "๐Ÿ’ฏ";
display: inline-block;
animation: give-score 2.5s infinite;
position: relative;
top: 0;
}
&:nth-child(2) {
left: 0;
right: 0;
margin: auto;
&:before {
animation: give-score 2.5s infinite 0.2s;
}
}
&:nth-child(3) {
left: auto;
right: 0;
&:before {
animation: give-score 2.5s infinite 0.4s;
}
}
}
button:hover .emoji:before {
content: "๐Ÿ‘";
transition: 0.5s ease;
}
}
@keyframes give-score {
30%,
80% {
top: 0;
}
40%,
70% {
top: 50px;
}
}
.button-pressure {
marquee {
position: absolute;
width: 90%;
top: 125%;
left: 5%;
font: 18px/1 "Margarine", sans-serif;
span {
display: inline-block;
height: 20px;
&:not(:last-child) {
margin-right: 130px;
}
}
}
button:before {
content: "OMG YAS";
transition: 0.5s ease;
left: 0;
right: 0;
margin: auto;
top: -15px;
font-size: 12px;
opacity: 0;
}
button:hover:before {
animation: omg-yes 1s;
}
}
.button-rainbow button {
animation: rainbow 3s infinite, heartbeat 0.6s infinite;
background: #c0392b;
.rainbow {
width: 120px;
height: 120px;
border-radius: 50%;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: -40px;
transition: 0.5s ease;
opacity: 0;
transform: rotate(0);
&:before {
content: "๐ŸŒˆ";
left: 0;
}
}
&:hover .rainbow {
opacity: 1;
animation: rotate-nonstop 0.2s infinite;
}
+ .name {
color: #444;
}
}
@keyframes rotate-nonstop {
50% {
transform: rotate(92deg);
}
}
@keyframes omg-yes {
50% {
opacity: 1;
}
100% {
top: -50px;
}
}
@keyframes rainbow {
0% {
background: #1abc9c;
}
10% {
background: #2ecc71;
}
20% {
background: #3498db;
}
30% {
background: #9b59b6;
}
40% {
background: #e74c3c;
}
50% {
background: #e67e22;
}
60% {
background: #f1c40f;
}
70% {
background: #2c3e50;
}
80% {
background: #9b59b6;
}
}
.button-jittery button {
animation: jittery 4s infinite;
&:hover {
animation: heartbeat 0.2s infinite;
}
}
@keyframes jittery {
5%,
50% {
transform: scale(1);
}
10% {
transform: scale(0.9);
}
15% {
transform: scale(1.15);
}
20% {
transform: scale(1.15) rotate(-5deg);
}
25% {
transform: scale(1.15) rotate(5deg);
}
30% {
transform: scale(1.15) rotate(-3deg);
}
35% {
transform: scale(1.15) rotate(2deg);
}
40% {
transform: scale(1.15) rotate(0);
}
}
@keyframes heartbeat {
50% {
transform: scale(1.1);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment