Text Link Button
0 viewseasy
Background:
1
2
3
4
<button class="text-link-btn">
<span>Learn More</span>
<span class="arrow">→</span>
</button>Text Link Button
0 viewseasy
Background:
1
2
3
4
<button class="text-link-btn">
<span>Learn More</span>
<span class="arrow">→</span>
</button>Was this helpful?
What is inside Text Link Button
Text Link Button is a CSS button built with transforms, defined in 28 lines across 5 selectors.
15
CSS properties
5
Selectors
28
Lines of CSS
2
Formats
Techniques used
TransitionsTransformsHover stateFocus state
CSS properties in this component
align-itemsbackgroundborderborder-radiuscolorcursordisplayfont-sizefont-weightgapoutlineoutline-offsetpaddingtransformtransitionAccessibility check
- Built on a native <button> element, so keyboard focus and screen reader semantics work without extra attributes.
- Defines a focus style for keyboard navigation.
These notes are generated by reading this component's own source, so they describe what it actually does rather than what a template says. Copy the code above in HTML, CSS and adapt it freely.