<div class="supt-button-double -dark">
<span class="supt-button -dark ">
<a class="supt-button__link" href=https://www.google.com>
<span class="supt-button__title">
Primary-btn
</span>
</a>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Primary-btn
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</span>
<span class="supt-button -dark ">
<button class="supt-button__link">
<span class="supt-button__title">
Secondary-btn
</span>
</button>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Secondary-btn
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</span>
</div>
No notes defined.
{% set buttonDoubleModifiers = modifiers|default(["light"]) %}
<div class="supt-button-double {{ buttonDoubleModifiers|modifiersAttr }}">
{% for button in buttons %}
{% set buttonWithModifiers = button|merge({modifiers: (button.modifiers|default([]))|merge(buttonDoubleModifiers)}) %}
{% include "atoms/buttons/button/button.twig" with buttonWithModifiers %}
{% endfor %}
</div>
{
"modifiers": [
"dark"
],
"buttons": [
{
"title": "Primary-btn",
"href": "https://www.google.com"
},
{
"title": "Secondary-btn"
}
]
}
.supt-button-double {
display: inline-flex;
gap: $spacing-2;
padding: 10px 8px 8px 10px;
border-radius: 9999px;
background-color: $color-grey-background;
box-shadow:
8px 8px 16px 0px $color-grey-1,
-8px -8px 16px 0px $color-white;
/* Remove the wrapper from the buttons (as it comes from the button-double component now) */
.supt-button__wrapper {
padding: 0;
background: none !important;
box-shadow: none !important;
}
.supt-button:first-child {
/* .supt-button__mask {
top: 0;
left: 0;
} */
}
&.-light {
/* Primary button for Light variant */
.supt-button:first-child {
.supt-button__inner {
box-shadow: none;
background-color: $color-main;
transition: background-color $transition-fast;
}
.supt-button__title,
.supt-button__icon {
color: $color-white;
}
.supt-button__mask {
/* --supt-button-mask-color: $color-white; */
&__inner {
background-color: $color-main;
transition: background-color $transition-fast;
}
}
&:hover,
&:focus-within {
.supt-button__inner {
background-color: $color-white;
box-shadow:
-1px -1px 0px 0px $color-white inset,
-2px -2px 2px 0px $color-grey-2 inset,
-1px -1px 0px 0px $color-white,
-2px -2px 2px 0px $color-grey-2;
}
.supt-button__title,
.supt-button__icon {
color: $color-main;
}
.supt-button__mask {
&__inner {
background-color: $color-white;
}
}
}
&:focus-within {
.supt-button__title,
.supt-button__icon {
color: $color-medium;
}
.supt-button__mask {
&__inner {
inset: 2px;
}
}
}
}
}
&.-dark {
background-color: $color-medium;
box-shadow:
8px 8px 16px 0px rgba(102, 0, 14, 0.6),
-8px -8px 16px 0px rgba(233, 53, 89, 0.4);
/* Primary button for Dark variant */
.supt-button:first-child {
top: -1px;
.supt-button__inner {
background-color: $color-main;
box-shadow:
8px 8px 16px 0px rgba(102, 0, 14, 0.6),
-8px -8px 16px 0px rgba(233, 53, 89, 0.4);
transition:
box-shadow $transition-fast,
background-color $transition-fast;
}
.supt-button__mask {
&__inner {
background-color: $color-main;
transition:
box-shadow $transition-fast,
background-color $transition-fast;
}
}
&:hover,
&:focus-within {
.supt-button__inner {
background-color: $color-medium;
/* box-shadow: none; */
box-shadow:
-1px -1px 0px 0px #eb2f54 inset,
-2px -2px 2px 0px rgb(63 0 11 / 80%) inset,
-1px -1px 0px 0px #eb2f54,
-2px -2px 2px 0px rgb(102 0 14 / 80%);
}
.supt-button__mask {
&__inner {
background-color: $color-medium;
transition:
box-shadow $transition-fast 0.47s,
background-color $transition-fast;
}
}
}
}
.supt-button:last-child {
.supt-button__wrapper {
box-shadow: none;
}
}
}
}