Links must have a style that is different from body text, but anchors should not. Because anchors and links share the <a>
tag, it is necessary to progressively define styles for this tag. Here, the default appearance of the <a>
tag is the same as for body text. Using an attribute selector, link styles can are applied to <a>
elements that have an href
attribute.
a {
// styles
&[href] {
// link styles
&:hover,
&:active {
// hovered and active link styles
}
}
}
For underlined links, I use border-bottom
instead of text-decoration
to apply an underline. This way, the underline can be styled and transitions can be employed. The framework includes SASS variables to globally define transition speeds.
Classes
- .links-underlined
- Applied to a containing element to add underlines to descendant links; by default, links do not have any underline.
- .links-notunderlined
- Applied to a containing element to remove underlines to descendant links; intended to be used inside an element that has the
links-underlined
class. - .tybutton
- Applied to an
<a>
tag to make a link appear as a button; based on the tybutton mixin. - .tybutton-outline
- Applied to an
<a>
tag to make a link appear as an outlined button; tybutton-outline mixin.
Variables
- $tycolor-fg
#111111 !default;
- Color of anchor links (same as body text color).
- $tyduration
(hover:250ms, move:500ms, 1x:1000ms, 2x:2000ms, 3x:3000ms) !default;
- SASS map of duration values for CSS transitions and animations; the
hover
duration is used for links. - $tycolor-link-default
#3380cc !default;
- Default link color.
- $tycolor-link-active
#cc3380 !default;
- Hovered and active link color.
- $tycolor-border-link-default
rgba($tycolor-link-default,0.5) !default;
- Default link underline color.
- $tycolor-border-link-active
rgba($tycolor-link-active,0.75) !default;
- Hovered and active link underline color.
- $tywidth-border
2px !default;
- Width (thickness) of the link underline.
Examples
Default Styles
<h2><a name="anchor1">Anchored Heading</a></h2>
<p><a name="anchor2">Anchored text</a>.</p>
<h2><a href="http://aaronpinero.net">Ut euismod purus</a></h2>
<p>Ut euismod purus sed <a href="http://aaronpinero.net">dolor bibendum</a>, et viverra sapien sagittis. Nullam luctus malesuada ante eget porttitor. Pellentesque eu lobortis augue. Quisque convallis porta tellus, eget lobortis dolor varius accumsan. <a href="http://aaronpinero.net">Donec eu purus</a> ut diam egestas dapibus. Morbi lorem est, luctus ac magna a, luctus volutpat mi. Nullam id <a href="http://aaronpinero.net">nulla eget urna</a> finibus lacinia. Curabitur porttitor tempus nulla non fringilla. Nam egestas vestibulum sem, vel tincidunt elit iaculis non.</p>
Anchored Heading
Ut euismod purus
Ut euismod purus sed dolor bibendum, et viverra sapien sagittis. Nullam luctus malesuada ante eget porttitor. Pellentesque eu lobortis augue. Quisque convallis porta tellus, eget lobortis dolor varius accumsan. Donec eu purus ut diam egestas dapibus. Morbi lorem est, luctus ac magna a, luctus volutpat mi. Nullam id nulla eget urna finibus lacinia. Curabitur porttitor tempus nulla non fringilla. Nam egestas vestibulum sem, vel tincidunt elit iaculis non.
Underlined
<h2><a href="http://aaronpinero.net">Ut euismod purus</a></h2>
<p>Ut euismod purus sed <a href="http://aaronpinero.net">dolor bibendum</a>, et viverra sapien sagittis. Nullam luctus malesuada ante eget porttitor. Pellentesque eu lobortis augue. Quisque convallis porta tellus, eget lobortis dolor varius accumsan. <a href="http://aaronpinero.net">Donec eu purus</a> ut diam egestas dapibus. Morbi lorem est, luctus ac magna a, luctus volutpat mi. Nullam id <a href="http://aaronpinero.net">nulla eget urna</a> finibus lacinia. Curabitur porttitor tempus nulla non fringilla. Nam egestas vestibulum sem, vel tincidunt elit iaculis non.</p>
Ut euismod purus
Ut euismod purus sed dolor bibendum, et viverra sapien sagittis. Nullam luctus malesuada ante eget porttitor. Pellentesque eu lobortis augue. Quisque convallis porta tellus, eget lobortis dolor varius accumsan. Donec eu purus ut diam egestas dapibus. Morbi lorem est, luctus ac magna a, luctus volutpat mi. Nullam id nulla eget urna finibus lacinia. Curabitur porttitor tempus nulla non fringilla. Nam egestas vestibulum sem, vel tincidunt elit iaculis non.
Links as Buttons
<p><a href="http://aaronpinero.net" class="tybutton">Link as Button</a></p>
<p><a href="http://aaronpinero.net" class="tybutton-outline">Link as Outline Button</a></p>