You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
7.2 KiB
CSS
363 lines
7.2 KiB
CSS
.button.dark-single {
|
|
--background: none;
|
|
--rectangle: #242836;
|
|
--success: #4BC793;
|
|
}
|
|
.button.white-single {
|
|
--background: none;
|
|
--rectangle: #F5F9FF;
|
|
--arrow: #275efe;
|
|
--success: #275efe;
|
|
--shadow: rgba(10, 22, 50, .1);
|
|
}
|
|
.button.dark {
|
|
--background: #242836;
|
|
--rectangle: #1C212E;
|
|
--arrow: #F5F9FF;
|
|
--text: #F5F9FF;
|
|
--success: #2F3545;
|
|
}
|
|
|
|
.button {
|
|
--background: #275efe;
|
|
--rectangle: #184fee;
|
|
--success: #4672f1;
|
|
--text: #fff;
|
|
--arrow: #fff;
|
|
--checkmark: #fff;
|
|
--shadow: rgba(10, 22, 50, .24);
|
|
display: flex;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
|
background: var(--background);
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px -1px var(--shadow);
|
|
transition: box-shadow .2s ease, -webkit-transform .2s ease;
|
|
transition: transform .2s ease, box-shadow .2s ease;
|
|
transition: transform .2s ease, box-shadow .2s ease, -webkit-transform .2s ease;
|
|
}
|
|
.button:active {
|
|
-webkit-transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
box-shadow: 0 1px 4px -1px var(--shadow);
|
|
}
|
|
.button ul {
|
|
margin: 0;
|
|
padding: 16px 40px;
|
|
list-style: none;
|
|
text-align: center;
|
|
position: relative;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 28px;
|
|
color: var(--text);
|
|
}
|
|
.button ul li:not(:first-child) {
|
|
top: 16px;
|
|
left: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
}
|
|
.button ul li:nth-child(2) {
|
|
top: 76px;
|
|
}
|
|
.button ul li:nth-child(3) {
|
|
top: 136px;
|
|
}
|
|
.button > div {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: var(--rectangle);
|
|
}
|
|
.button > div:before, .button > div:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
}
|
|
.button > div:before {
|
|
border-radius: 1px;
|
|
width: 2px;
|
|
top: 50%;
|
|
left: 50%;
|
|
height: 17px;
|
|
margin: -9px 0 0 -1px;
|
|
background: var(--arrow);
|
|
}
|
|
.button > div:after {
|
|
width: 60px;
|
|
height: 60px;
|
|
-webkit-transform-origin: 50% 0;
|
|
transform-origin: 50% 0;
|
|
border-radius: 0 0 80% 80%;
|
|
background: var(--success);
|
|
top: 0;
|
|
left: 0;
|
|
-webkit-transform: scaleY(0);
|
|
transform: scaleY(0);
|
|
}
|
|
.button > div svg {
|
|
display: block;
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin: -9px 0 0 -10px;
|
|
fill: none;
|
|
z-index: 1;
|
|
stroke-width: 2px;
|
|
stroke: var(--arrow);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.button.loading ul {
|
|
-webkit-animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
|
animation: text calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
|
}
|
|
.button.loading > div:before {
|
|
-webkit-animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
|
animation: line calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
|
}
|
|
.button.loading > div:after {
|
|
-webkit-animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
|
animation: background calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
|
}
|
|
.button.loading > div svg {
|
|
-webkit-animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
|
animation: svg calc(var(--duration) * 1ms) linear forwards calc(var(--duration) * .065ms);
|
|
}
|
|
|
|
@-webkit-keyframes text {
|
|
10%,
|
|
85% {
|
|
-webkit-transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
}
|
|
95%,
|
|
100% {
|
|
-webkit-transform: translateY(-200%);
|
|
transform: translateY(-200%);
|
|
}
|
|
}
|
|
|
|
@keyframes text {
|
|
10%,
|
|
85% {
|
|
-webkit-transform: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
}
|
|
95%,
|
|
100% {
|
|
-webkit-transform: translateY(-200%);
|
|
transform: translateY(-200%);
|
|
}
|
|
}
|
|
@-webkit-keyframes line {
|
|
5%,
|
|
10% {
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
40% {
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
65% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
75%,
|
|
100% {
|
|
-webkit-transform: translateY(30px);
|
|
transform: translateY(30px);
|
|
}
|
|
}
|
|
@keyframes line {
|
|
5%,
|
|
10% {
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
40% {
|
|
-webkit-transform: translateY(-20px);
|
|
transform: translateY(-20px);
|
|
}
|
|
65% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
75%,
|
|
100% {
|
|
-webkit-transform: translateY(30px);
|
|
transform: translateY(30px);
|
|
}
|
|
}
|
|
@-webkit-keyframes svg {
|
|
0%,
|
|
20% {
|
|
stroke-dasharray: 0;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
21%,
|
|
89% {
|
|
stroke-dasharray: 26px;
|
|
stroke-dashoffset: 26px;
|
|
stroke-width: 3px;
|
|
margin: -10px 0 0 -10px;
|
|
stroke: var(--checkmark);
|
|
}
|
|
100% {
|
|
stroke-dasharray: 26px;
|
|
stroke-dashoffset: 0;
|
|
margin: -10px 0 0 -10px;
|
|
stroke: var(--checkmark);
|
|
}
|
|
12% {
|
|
opacity: 1;
|
|
}
|
|
20%,
|
|
89% {
|
|
opacity: 0;
|
|
}
|
|
90%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes svg {
|
|
0%,
|
|
20% {
|
|
stroke-dasharray: 0;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
21%,
|
|
89% {
|
|
stroke-dasharray: 26px;
|
|
stroke-dashoffset: 26px;
|
|
stroke-width: 3px;
|
|
margin: -10px 0 0 -10px;
|
|
stroke: var(--checkmark);
|
|
}
|
|
100% {
|
|
stroke-dasharray: 26px;
|
|
stroke-dashoffset: 0;
|
|
margin: -10px 0 0 -10px;
|
|
stroke: var(--checkmark);
|
|
}
|
|
12% {
|
|
opacity: 1;
|
|
}
|
|
20%,
|
|
89% {
|
|
opacity: 0;
|
|
}
|
|
90%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes background {
|
|
10% {
|
|
-webkit-transform: scaleY(0);
|
|
transform: scaleY(0);
|
|
}
|
|
40% {
|
|
-webkit-transform: scaleY(0.15);
|
|
transform: scaleY(0.15);
|
|
}
|
|
65% {
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
border-radius: 0 0 50% 50%;
|
|
}
|
|
75% {
|
|
border-radius: 0 0 50% 50%;
|
|
}
|
|
90%,
|
|
100% {
|
|
border-radius: 0;
|
|
}
|
|
75%,
|
|
100% {
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
@keyframes background {
|
|
10% {
|
|
-webkit-transform: scaleY(0);
|
|
transform: scaleY(0);
|
|
}
|
|
40% {
|
|
-webkit-transform: scaleY(0.15);
|
|
transform: scaleY(0.15);
|
|
}
|
|
65% {
|
|
-webkit-transform: scaleY(0.5);
|
|
transform: scaleY(0.5);
|
|
border-radius: 0 0 50% 50%;
|
|
}
|
|
75% {
|
|
border-radius: 0 0 50% 50%;
|
|
}
|
|
90%,
|
|
100% {
|
|
border-radius: 0;
|
|
}
|
|
75%,
|
|
100% {
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
html {
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
* {
|
|
box-sizing: inherit;
|
|
}
|
|
*:before, *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
font-family: 'Roboto', Arial;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #E4ECFA;
|
|
}
|
|
body .container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
body .container > div {
|
|
flex-basis: 100%;
|
|
width: 0;
|
|
}
|
|
body .container .button {
|
|
margin: 16px;
|
|
}
|
|
@media (max-width: 400px) {
|
|
body .container .button {
|
|
margin: 12px;
|
|
}
|
|
}
|
|
body .dribbble {
|
|
position: fixed;
|
|
display: block;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
}
|
|
body .dribbble img {
|
|
display: block;
|
|
height: 28px;
|
|
} |