Index

arrow_back "Buttons" Category

Links

A link is a strange type of button containing a single icon and title. I found it necessary for some reason.

Demo

Link Title Link Without Icon

Chip Link Chip Link Without Icon

Code

code scss/elements/_button.scss
<a href="#" class="link link-block">
	<img class="link-img" src="https://jfenn.me/images/ic/link.svg">
	<span class="link-title">Link Title</span>
</a>
<button href="#" class="link link-block">
	<i class="link-img material-icons">error_outline</i>
	<span class="link-title">Link Title (2)</span>
</button>
<a href="#" class="link link-block">
	<span class="link-title">Link Without Icon</span>
</a>

<p>
	<a href="#" class="link link-chip">
		<img class="link-img" src="https://jfenn.me/images/ic/link.svg">
		<span class="link-title">Chip Link</span>
	</a>
	<button href="#" class="link link-chip link-danger">
		<i class="link-img material-icons">link</i>
		<span class="link-title">Chip Link (2)</span>
	</button>
	<a href="#" class="link link-chip">
		<span class="link-title">Chip Link Without Icon</span>
	</a>
</p>