<a class="icon-button" href="https://example.com" rel="noopener noreferrer" target="_blank">
<span class="icon-button__icon">
<svg class="icon icon--external-link" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#external-link"></use>
</svg> </span>
<span class="icon-button__text u-underline">Button-Text mit externem Link</span>
</a>
{% set link = link ?? null %}
{% set color = color ?? null %}
{% set text = text ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ??? link_icon(link=link, type=linkType, always=true) %}
{% set tag = link ? 'a' : (tag ??? 'button') -%}
<{{ tag }} {{ html_attributes({
class: {
'icon-button': true,
'icon-button--stacked': stacked ?? false,
'icon-button--clipped': clipped ?? false,
("icon-button--color-#{color}"): color,
'u-overlay-link': overlay ?? false,
},
type: tag == 'button' ? (type ??? 'button'),
title: not text ? title,
disabled: disabled ?? null,
target: target ?? null,
href: link,
id: id ?? false,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
<span class="icon-button__icon">
{% include '@icon' with { icon: icon } only %}
</span>
{% if text %}
<span class="icon-button__text u-underline">{{ text }}</span>
{% endif %}
{% if count is defined and count is numeric %}
<span class="icon-button__count">
<span class="u-hidden-visually">(</span>
{{- count -}}
<span class="u-hidden-visually">)</span>
</span>
{% endif %}
</{{ tag }}>
{
"link": "https://example.com",
"text": "Button-Text mit externem Link"
}
:root {
--icon-button-background-color: var(--color-orange);
--icon-button-background-color-active: var(--color-white);
--icon-button-text-color: currentColor;
--icon-button-size: 6.2rem;
--icon-button-border-color: var(--icon-button-background-color);
--icon-button-border-color-active: var(--icon-button-border-color);
--icon-button-border-size: 4px;
--icon-button-text-size: 1.8rem;
--icon-button-line-height: 1.3;
--icon-button-font-weight: var(--font-weight-semibold);
--icon-button-icon-color: var(--color-midnight);
--icon-button-icon-color-active: var(--color-midnight);
--icon-button-icon-size: 0.3225em;
--icon-button-gap: 2rem;
--icon-button-underline-height: 2px;
--icon-button-underline-color: transparent;
--icon-button-underline-focus-color: currentColor;
--icon-button-underline-offset: 0.3em;
}
.icon-button {
align-items: center;
display: inline-flex;
font-size: var(--icon-button-size);
gap: var(--icon-button-gap);
line-height: 1;
text-align: start;
user-select: none;
&:is(:hover:not([disabled]), :focus:not(.has-invisible-focus), .icon-button--active),
.has-button:is(:hover, :focus-within) &:not([disabled]) {
--icon-button-background-color: var(--icon-button-background-color-active);
--icon-button-border-color: var(--icon-button-border-color-active);
--icon-button-icon-color: var(--icon-button-icon-color-active);
}
&[disabled] {
cursor: not-allowed;
opacity: 0.5;
}
}
.icon-button--clipped {
max-inline-size: 100%;
}
.icon-button--stacked {
flex-direction: column-reverse;
text-align: center;
}
.icon-button__text {
--underline-color: var(--icon-button-underline-color);
--underline-color--enter: var(--icon-button-underline-focus-color);
--underline-height: var(--icon-button-underline-height);
--underline-offset: var(--icon-button-underline-offset);
color: var(--icon-button-text-color);
font-size: var(--icon-button-text-size);
font-weight: var(--icon-button-font-weight);
line-height: var(--icon-button-line-height);
.icon-button--clipped & {
overflow: hidden;
padding-block: 0.25em;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.icon-button__count {
background-color: var(--icon-button-count-background-color, var(--color-orange));
border-radius: 999999px;
color: var(--icon-button-count-color, var(--color-midnight));
font-size: var(--icon-button-count-text-size, 1.6rem);
font-weight: var(--icon-button-count-font-weight, var(--font-weight-semibold));
min-inline-size: 1.8em;
padding-block: 0.4em;
padding-inline: 0.6em;
text-align: center;
}
.icon-button__icon {
align-items: center;
background-color: var(--icon-button-background-color);
block-size: var(--icon-button-size);
border: var(--icon-button-border-size) solid var(--icon-button-border-color);
color: var(--icon-button-icon-color);
display: flex;
flex-shrink: 0;
font-size: var(--icon-button-icon-size);
inline-size: var(--icon-button-size);
justify-content: center;
transition-duration: var(--duration-fast);
transition-property: background-color, border-color, color;
}
No notes defined.