.custom-button,
.wp-block .custom-button {
position: relative;
display: inline-block;
padding: 35px 0;
white-space: nowrap;
padding-right: 1rem;
}
.custom-button a,
.custom-button .cta,
.custom-button .cta-multiple {
display: inline;
padding: 10px 20px;
background-color: transparent;
text-decoration: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05rem;
color: white;
position: relative;
z-index: 0;
font-size: 1.375rem;
cursor: pointer;
}
.custom-button .cta,
.custom-button .cta-multiple {
cursor: pointer;
} .custom-button.danger a,
.custom-button.danger a,
.custom-button.danger .cta,
.custom-button.danger .cta-multiple {
color: white;
}
.custom-button.normal a,
.custom-button.normal .cta,
.custom-button.normal .cta-multiple {
color: var(--wp--preset--color--va-black);
} .custom-button a::after,
.custom-button .cta::after,
.custom-button .cta-multiple::after,
.custom-button a::before,
.custom-button .cta::before,
.custom-button .cta-multiple::before {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
transition: opacity 0.2s ease;
z-index: -1;
}
.custom-button a::after,
.custom-button .cta::after,
.custom-button .cta-multiple::after {
border: 1px solid var(--wp--preset--color--va-black);
opacity: 1;
}
.custom-button.danger a::after,
.custom-button.danger .cta::after,
.custom-button.danger .cta-multiple::after {
opacity: 0;
}
.custom-button a::before,
.custom-button .cta::before,
.custom-button .cta-multiple::before {
background-color: var(--wp--preset--color--va-blue);
opacity: 1;
} .custom-button.normal a::before,
.custom-button.normal .cta::before,
.custom-button.normal .cta-multiple::before {
background-color: var(--wp--preset--color--va-black);
opacity: 0;
} .custom-button.danger a:hover::before,
.custom-button.danger .cta:hover::before,
.custom-button.danger .cta-multiple:hover::before {
background-color: white;
}
.custom-button.danger a:hover::after,
.custom-button.danger .cta:hover::after,
.custom-button.danger .cta-multiple:hover::after {
border-color: var(--wp--preset--color--va-black);
opacity: 1;
}
.wp-block-vagabond-plus-card:hover .custom-button.normal a::before,
.custom-button.normal a:hover::before,
.custom-button.normal .cta:hover::before,
.custom-button.normal .cta-multiple:hover::before {
opacity: 1;
}
.wp-block-vagabond-plus-card:hover .custom-button.normal a,
.custom-button.normal a:hover,
.custom-button.normal .cta:hover,
.custom-button.normal .cta-multiple:hover {
color: white;
}
.custom-button.danger a:hover,
.custom-button.danger .cta:hover,
.custom-button.danger .cta-multiple:hover {
color: var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-card:hover .custom-button.danger a {
color: var(--wp--preset--color--va-white);
}
.wp-block-vagabond-plus-card:hover .custom-button.danger a::before {
background-color: var(--wp--preset--color--va-blue);
} .custom-button.remove-spacing {
padding: 10px 0;
width: -moz-fit-content;
width: fit-content;
}
.custom-button.not-interactive a {
pointer-events: none;
} @media only screen and (max-width: 1400px) {
.custom-button a,
.custom-button .cta,
.custom-button .cta-multiple {
font-size: 1rem;
padding: 8px;
line-height: 1;
}
}
@media only screen and (max-width: 782px) {
.custom-button {
padding: 24px 0;
}
.custom-button a,
.custom-button .cta,
.custom-button .cta-multiple {
padding: 8px 12px;
}
}