<button class="progress-button" type="button">
<span class="progress-button__progress" style="--progress-button-progress: 20%;"></span>
<span class="progress-button__text u-underline">Jetzt anmelden!</span>
<span class="progress-button__label">Zu 80% bereits ausgebucht!</span>
</button>
{% set link = link ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set tag = link ? 'a' : 'button' -%}
<{{ tag }} {{ html_attributes({
class: {
'progress-button': true,
'u-overlay-link': overlay ?? false,
},
type: not link ? (type ??? 'button'),
title: title ?? false,
disabled: disabled ?? false,
target: target ?? false,
href: link,
id: id ?? false,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
<span class="progress-button__progress" style="--progress-button-progress: {{ progress ?? 0 }}%;"></span>
<span class="progress-button__text u-underline">
{{- text -}}
</span>
{% if label|default %}
<span class="progress-button__label">
{{- label -}}
</span>
{% endif %}
</{{ tag }}>
{
"progress": 20,
"text": "Jetzt anmelden!",
"label": "Zu 80% bereits ausgebucht!"
}
.progress-button {
align-items: center;
background-color: var(--progress-button-background-color, var(--color-white));
border-color: var(--progress-button-border-color, var(--color-orange));
border-style: var(--progress-button-border-style, solid);
border-width: var(--progress-button-border-width, 4px);
color: var(--progress-button-color, var(--color-midnight));
display: inline-flex;
flex-direction: column;
inline-size: var(--progress-button-width, auto);
justify-content: center;
padding-block: var(--_progress-button-padding-inline, 2rem);
padding-inline: var(--_progress-button-padding-inline, 3.2rem);
position: relative;
row-gap: var(--progress-button-row-gap, 0.5rem);
transition-duration: var(--duration-fast);
transition-property: background-color, border-color, text-decoration-color;
user-select: none;
&:is(:hover:not([disabled]), :focus:not(.has-invisible-focus), .button--active),
.has-button:is(:hover, :focus-within) &:not([disabled]) {
--underline-color: currentColor;
--underline-height: 2px;
--_progress-button-progress-opacity: 0;
border-color: var(--progress-button-border-color--engaged, var(--color-orange));
color: var(--progress-button-color--engaged, var(--color-midnight));
}
&[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
}
.progress-button__progress {
background-color: var(--progress-button-background-color--engaged, var(--color-orange));
inset-block: 0;
inset-inline: -1px;
opacity: var(--_progress-button-progress-opacity, 1);
position: absolute;
transform: scale(var(--_progress-button-progress-scale, var(--progress-button-progress, 0%)), 1);
transform-origin: 0 0;
transition-property: opacity;
z-index: 1;
}
.progress-button__text {
font-size: var(--progress-button-text-font-size, 1.6rem);
font-weight: var(--progress-button-text-font-weight, var(--font-weight-bold));
line-height: var(--progress-button-text-line-height, 1.2);
position: relative;
z-index: 2;
}
.progress-button__label {
font-size: var(--progress-button-label-font-size, 1.4rem);
font-weight: var(--progress-button-label-font-weight, var(--font-weight-regular));
line-height: var(--progress-button-label-line-height, 1.2);
position: relative;
z-index: 2;
}
No notes defined.