Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/css-animations-obvious-cta-buttons.markdown

Created March 24, 2019 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/87c12742339fe9b7bd4c33b2ac842ad9 to your computer and use it in GitHub Desktop.
Save CodeMyUI/87c12742339fe9b7bd4c33b2ac842ad9 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Animations: Obvious CTA Buttons
Raw
css-animations-obvious-cta-buttons.markdown
Raw
index.pug
.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
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.scss
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);
}
}
Raw
styles
<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