/home/bdqbpbxa/demo-subdomains/adaptiq.goodface.com.ua/frontend/css/ui-components/buttons.css
.default-button {
position: relative;
overflow: hidden;
background: var(--white);
border-radius: 100px;
border: none;
height: 56px;
width: fit-content;
min-width: 240px;
padding: 18px 24px 0 24px;
display: flex;
justify-content: center;
align-items: flex-start;
font-weight: 600;
font-size: 16px;
text-align: center;
letter-spacing: 0.01em;
color: var(--background-dark);
cursor: pointer;
transition: background 0.5s, color 0.4s, opacity 0.4s;
}
button.default-button {
padding: 20px 24px 0 24px;
}
.default-button:before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
border-radius: inherit;
transform: translateY(100%);
background-color: var(--red);
transition: transform 0.3s cubic-bezier(.215, .61, .355, 1), -webkit-transform 0.3s cubic-bezier(.215, .61, .355, 1);
}
.default-button * {
font-size: inherit;
font-weight: inherit;
}
.default-button .btn-innerText {
position: relative;
z-index: 2;
display: block;
}
.default-button .btn-original-text {
display: flex;
align-items: flex-end;
transition: transform 0.4s, opacity 0.4s;
height: 19px;
}
.default-button .btn-word {
position: relative;
z-index: 1;
display: inline-block;
pointer-events: none;
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
transition: transform 0.4s;
height: 19px;
}
.default-button span.btn-word:not(:nth-of-type(2)) {
padding-left: 5px;
}
.default-button.-bordered {
border: 1px solid var(--grey);
background: rgba(0, 0, 0, 0);
transition: background 0.4s, color 0.4s, border 0.4s;
}
.default-button.-with-arrow {
border: 1px solid var(--grey);
filter: drop-shadow(0px 16px 24px rgba(32, 0, 5, 0.08));
background: rgba(0, 0, 0, 0);
transition: background 0.4s, color 0.4s, border 0.4s;
}
.default-button.-bordered:before,
.default-button.-with-arrow:before {
background-color: var(--grey);
}
.default-button.-with-arrow:after {
content: '';
position: relative;
z-index: 2;
display: block;
width: 16px;
height: 16px;
margin-left: 8px;
margin-top: 2.4px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM3NF8xMTkwNikiPgo8Y2lyY2xlIG9wYWNpdHk9IjAuMzIiIGN4PSI4LjUiIGN5PSI4IiByPSI4IiBmaWxsPSIjQkJCQkJCIi8+CjxwYXRoIGQ9Ik0xMiA4SDQuNU0xMiA4TDkgMTFNMTIgOEw5IDUiIHN0cm9rZT0iIzExMTExMSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM3NF8xMTkwNiI+CjxyZWN0IHg9IjAuNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K');
transition: background 0.4s;
}
.-apple .default-button.-with-arrow:after {
margin-top: 2px;
}
.default-button.-black {
background: var(--text-dark);
color: var(--white);
}
.default-button.-black.-bordered {
border: 1px solid var(--dark-grey);
filter: drop-shadow(0px 16px 24px rgba(32, 0, 5, 0.08));
background: rgba(0, 0, 0, 0);
transition: background 0.4s, color 0.4s, border 0.4s;
}
.default-button.-black.-with-arrow {
border: 1px solid var(--dark-grey);
filter: drop-shadow(0px 16px 24px rgba(32, 0, 5, 0.08));
background: rgba(0, 0, 0, 0);
transition: background 0.4s, color 0.4s, border 0.4s;
}
.default-button.-black.-bordered:before,
.default-button.-black.-with-arrow:before {
background-color: var(--white);
}
.default-button.-black.-with-arrow:after {
content: '';
display: block;
width: 16px;
height: 16px;
margin-left: 8px;
background: no-repeat center / contain url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM3NV83MjUwKSI+CjxjaXJjbGUgb3BhY2l0eT0iMC4zMiIgY3g9IjguNSIgY3k9IjgiIHI9IjgiIGZpbGw9IiM1NTU1NTUiLz4KPHBhdGggZD0iTTEyIDhINC41TTEyIDhMOSAxMU0xMiA4TDkgNSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM3NV83MjUwIj4KPHJlY3QgeD0iMC41IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSI4IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=');
transition: background 0.4s;
}