Quick Arrows with Borders

index.html

<div class="container">
  <p class="saying">Hi There!</p>
  <p class="saying hidden">See Ya Later.</p>
  
  <a href="#prev" class="prev">Prev</a>
  <a href="#next" class="next">Next</a>
</div>

Quick Arrows with Borders.markdown

Quick Arrows with Borders

Simple css3 animated arrow buttons. Quickly customized though SCSS variable settings.

A Pen by J Scott Smith on CodePen.

License.

script.js

$( document ).ready(function() {
  var prev = $(".prev");
  var next = $(".next");
  var saying = $(".saying");
  prev.on('click', function() {
    saying.toggleClass('hidden');
  });
  next.on('click', function() {
    saying.toggleClass('hidden');
  }); 
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

// Adjust settings for some quick and nifty arrows

// Arrow Style Settings
$arrow-size: 2em;
$border-width: 2px;
$border-type: solid; // solid, dotted, double, groove, ridge
$border-arrow-side: $border-width $border-type rgba(white,.75);
$border-arrow-side-hover: $border-width $border-type white;
$border-arrow-side-click: $border-width $border-type rgba(black,.65);

// Scaling, Transistioning
$scale-hover: 1.05;
$scale-active: 1.025;
$scale-hover-speed: 100ms;
$scale-active-speed: 50ms;

// Hover Area Style Settings
$ha-size: 3.5; // arrow size * n
$ha-border: $border-arrow-side;
$ha-bg: none; // rgba(white,.25)
$ha-hover-bg: rgba(black,.05);
$ha-active-bg: rgba(white,.1);
$ha-border-radius: 5%;


.prev,
.next {
  @include transition(transform, $scale-hover-speed);
	position: absolute;
  display: block;
  box-sizing: border-box;
	width: $arrow-size * $ha-size;
	height: $arrow-size * $ha-size;
  // Fix jumpy transitions
  transform: translatez(0);
  @include backface-visibility( hidden );
  // Hide Text
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  // Optional Styling
  background-color: $ha-bg;
  border: $ha-border;
  border-radius: $ha-border-radius;  
  &:after {
    @include transition(transform, $scale-hover-speed);
    position: absolute;
    box-sizing: border-box;
    border-top: $border-arrow-side;
    border-left: $border-arrow-side;
    content: "";
    width: $arrow-size;
    height: $arrow-size;
    top: 50%;
    margin-top: - ($arrow-size / 2);
	}
}
.prev {
  left: 0;
  &:after {
    @include rotate(-45deg);
    border-top: $border-arrow-side;
    border-left: $border-arrow-side;
    left: 56%;
    margin-left: - ($arrow-size / 2);
  }
}
.next {
  right: 0;
  &:after {
		@include rotate(135deg);
    border-top: $border-arrow-side;
    border-left: $border-arrow-side;
    right: 56%;
    margin-right: - ($arrow-size / 2);
  }
}

// Hover states
.prev:hover,
.next:hover {
  @include transform( scale($scale-hover) );
  background-color: $ha-hover-bg;
  &:after {
    border-top: $border-arrow-side-hover;
    border-left: $border-arrow-side-hover;
  }
}
.prev:hover {
  &:after {
    @include transform( rotate(-45deg) scale($scale-hover) );
  }
}
.next:hover {
  &:after {
    @include transform( rotate(135deg) scale($scale-hover) );
  }
}

// Active states
.prev:active,
.next:active {
  @include transition(transform, $scale-active-speed);
  @include transform( scale($scale-active) );
  background-color: $ha-active-bg;
  &:after {
    border-top: $border-arrow-side-click;
    border-left: $border-arrow-side-click;
  }
}
.prev:active {
  &:after {
    @include transform( rotate(-45deg) scale($scale-active) );
  }
}
.next:active {
  &:after {
    @include transform( rotate(135deg) scale($scale-active) );
  }
}

// Unecessary Page styling 
body {
  background-color: salmon;
}
.container {
  position: relative;
  margin: 0 auto;
  max-width: 640px;
  padding: 4em;
  overflow: visible;
}
.saying {
  @include transition(opacity, 400ms);
  position: absolute;
  width: 100%;
  left: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 2em;
  font-weight: 100;
  color: rgba(black,.65);
  text-align: center;
  opacity: 1;
}
.hidden {
  opacity: 0;
}