.main-content
.item.button-jittery(style="--bg-color: #f1c40f;")
button 点击按钮!
.name Subtlety
.item.button-pulse(style="--bg-color: #e67e22")
.button__wrapper
.pulsing
button 点击按钮!
.name Dubstep
.item.button-typewriter(style="--bg-color: #e74c3c")
.button__wrapper
button
p 点击按钮!
.name Typewriter
.item.button-pressure(style="--bg-color: #9b59b6")
button 点击按钮!
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 点击按钮!
.hands
.name Handsy
.item.button-100(style="--bg-color:#2ecc71")
button 点击按钮!
- for (var i=1; i<4; i++)
.emoji
.name You're 💯
.item.button-parrot(style="--bg-color: #2c3e50")
button 点击按钮!
- for (var i=1; i<7; i++)
.parrot
.name Encouragement
.item.button-rainbow(style="--bg-color: #ecf0f1")
button 点击按钮!
.rainbow
.name Rainbow
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
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;
margin: 0;
}
.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);
}
}
JS
格式化