By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Link Button
Overview
Link buttons indicate an action that users can take. They should be used in a lower hierarchy than classic buttons, indicating that you are moving into another page or content.
Often used with an SVG Icon to complement the interaction.
<div class="d-flex justify-content-center align-items-center">
<div>
<a href="#">
Learn More
</a>
</div>
<div class="ml-5 d-flex align-items-center">
<svg width="16" height="15" viewBox="0 0 22 23" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M10.5689 1.69158L20.9999 12.1226L10.5689 22.5535"
stroke="#141414" />
<rect x="0.137939" y="11.6292" width="20.7221"
height="0.986769" fill="#141414" />
</svg>
</div>
</div><div class="d-flex justify-content-center align-items-center">
<div class="mr-5 d-flex align-items-center rotate-180" >
<svg width="16" height="15" viewBox="0 0 22 23" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M10.5689 1.69158L20.9999 12.1226L10.5689 22.5535"
stroke="#141414" />
<rect x="0.137939" y="11.6292" width="20.7221"
height="0.986769" fill="#141414" />
</svg>
</div>
<div>
<a href="#">
Go back
</a>
</div>
</div><a href="#" class="link-big-square">
<div>
<h2 class="c-black text-left">
Componentes
</h2>
<div class="c-gray-text">
Cards, Hero, Buttons, Tabs, Modals...
</div>
</div>
<svg width="16" height="15" viewBox="0 0 22 23" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M10.5689 1.69158L20.9999 12.1226L10.5689 22.5535"
stroke="#141414" />
<rect x="0.137939" y="11.6292" width="20.7221"
height="0.986769" fill="#141414" />
</svg>
</a>.link {
&-big-square {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid transparent;
padding: 18px 30px;
transition: background-color 0.2s ease, border-color 0.2s ease;
border-radius: 4px;
@include media-breakpoint-down(sm) {
padding: 18px 20px;
}
&:hover {
background-color: $off-white;
// border: 1px solid currentColor;
}
&-white {
background-color: $white;
&:hover {
background-color: $white;
border: 1px solid $gold;
}
}
&-rojo {
&:hover {
border: 1px solid $rojo;
}
}
&-green {
&:hover {
border: 1px solid $green;
}
}
}
}
This type of button should be used to indicate that we are moving into other page and not for actions inside the same page.
This button should always have a lower hierarchy than the classic buttons that usually have a background color.
Variant
Purpose
Forward
Indicates that you are moving into a new page or content.
Backwards
Indicates that you are returning to a previous page or content.
No Icon
Simple link
Link block button
Link button extended to full width.
Copied to clipboard