Link Styles

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>

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>

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>