<button class="button">Click Me</button>
<a class="button" href="#">No, Please Click Me</a>

<button class="button is-outlined">Why Not Try Clicking Me?</button>
<a class="button is-outlined" href="#">Or Click Me For Once?!</a>
@import bourbon
	
// Feel free to edit these settings
// and try out different things.
$animation-speed: 150ms

$button-bg-color: tomato
$button-text-color: white
$button-text-size: 1.25em
$button-spacing: 1.5rem



// Here's the code for the buttons.
.button
	display: inline-block
	margin: $button-spacing / 2
	padding: ($button-spacing / 2) $button-spacing
	
	border: none
	border-radius: $button-spacing / 8
	outline: none

	background-color: $button-bg-color

	color: $button-text-color
	font-family: inherit
	font-size: $button-text-size
	font-weight: 400
	line-height: $button-spacing
	text-decoration: none
	text-align: center

	cursor: pointer
	transition: all $animation-speed ease-out

	&:focus,
	&:hover
		background-color: tint($button-bg-color, 10%)

		box-shadow: 0 0 0 ($button-spacing / 8) $button-text-color, 0 0 0 ($button-spacing / 4) tint($button-bg-color, 10%)

	&:active
		background-color: shade($button-bg-color, 5%)

		box-shadow: 0 0 0 ($button-spacing / 8) shade($button-bg-color, 5%), 0 0 0 ($button-spacing / 4) shade($button-bg-color, 5%)
		transition-duration: $animation-speed / 2

	&.is-outlined
		border: ($button-spacing / 8) solid $button-bg-color
		
		background-color: transparent
	
		color: $button-bg-color
	
		&:focus,
		&:hover
			border-color: tint($button-bg-color, 10%)
	
			color: tint($button-bg-color, 10%)
	
		&:active
			border-color: shade($button-bg-color, 5%)
	
			color: shade($button-bg-color, 5%)



// Not relevant for the buttons. 
// Only for this demo to look okay.
*, *::before, *::after
	box-sizing: border-box

html
	background-color: #fafafa

	font-family: Roboto, sans-serif

html, body
	height: 100%
	margin: 0
	padding: 0
	width: 100%

body
	align-items: center
	display: flex
	flex-flow: column nowrap
	justify-content: center
View Compiled
document.querySelector('.button').addEventListener('click', function (event) {
	event.preventDefault();
});

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400

External JavaScript

This Pen doesn't use any external JavaScript resources.