<h1>Sign-post arrow buttons</h1>
<p><button class="btn-right"><a href="#">Right</a></button></p>
<p><button class="btn-left"><a href="#">Left</a></button></p>
<p><button class="btn-up"><a href="#">Up</a></button> <button class="btn-down"><a href="#">Down</a></button></p>
/* The button-maker */
@mixin arrow-button($color, $background, $shadow, $font-size, $width, $height, $direction) {
background: none;
border: 0;
font-size: $font-size;
line-height: $height;
position: relative;
width: $width;
height: $height;
@if $direction == "up" {
transform: rotate(-90deg);
} @else if $direction == "down" {
transform: rotate(90deg);
}
a {
color: $color;
text-decoration: none;
position: relative;
z-index: 10;
}
&::before,
&::after {
background: $background;
border-radius: 2px;
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
transition: all 1s;
height: $height/2;
}
&::before {
box-shadow:
-1px 1px 0 $shadow,
-2px 2px 0 $shadow,
-3px 3px 0 $shadow,
-4px 4px 0 $shadow;
transform: skew(45deg);
@if $direction == "left" { bottom: 0; z-index: 1 }
@else { top: 0; }
}
&::after {
box-shadow: 1px 1px 0 $shadow,
2px 2px 0 $shadow,
3px 3px 0 $shadow,
4px 4px 0 $shadow;
transform: skew(-45deg);
@if $direction == "left" { top: 0;}
@else { bottom: 0; }
}
&:hover::before,
&:hover::after {
background: lighten($background,15%);
}
&:focus {
&::before,
&::after {
background: lighten($background,15%);
}
outline: 0;
}
}
/* How to include it */
.btn-right {
@include arrow-button(#fff, #29c0d5, #1897c0, 22px, 8em, 2em, right);
&:hover {
//animation: zoom 2s;
}
}
.btn-left {
@include arrow-button(#fff, #e4135d, #c81163, 22px, 8em, 2em, left);
&:hover {
//animation: spin 1.5s linear;
}
}
.btn-up {
@include arrow-button(#fff, #e4135d, #c81163, 22px, 4em, 3em, up);
}
.btn-down {
@include arrow-button(#fff, #29c0d5, #1897c0, 22px, 6em, 4em, down);
margin-top: 3em;
}
@keyframes zoom {
25% {
transform: scale3d(1.5,1.5,0);
}
50% {
transform: scale3d(1,1,0);
}
75% {
transform: scale3d(1.25, 1.25, 0);
}
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
/* Page styling */
body {
background: #fefefe;
font-family: "Noto sans", sans-serif;
text-align: center;
margin: 3em 0;
}
h1 {
color: #0b1421;
font-weight: 400;
}
button a {
top: -2px; // Better alignment for font
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.