Flexing pagination arrows

Flexing pagination arrows.markdown

Flexing pagination arrows

A Pen by Hakim El Hattab on CodePen.

License.

index.html

<div class="counter"></div>

<button class="paginate left"><i></i><i></i></button>
<button class="paginate right"><i></i><i></i></button>

script.js

// basic paging logic to demo the buttons
var pr = document.querySelector( '.paginate.left' );
var pl = document.querySelector( '.paginate.right' );

pr.onclick = slide.bind( this, -1 );
pl.onclick = slide.bind( this, 1 );

var index = 0, total = 5;

function slide(offset) {
  index = Math.min( Math.max( index + offset, 0 ), total - 1 );

  document.querySelector( '.counter' ).innerHTML = ( index + 1 ) + ' / ' + total;

  pr.setAttribute( 'data-state', index === 0 ? 'disabled' : '' );
  pl.setAttribute( 'data-state', index === total - 1 ? 'disabled' : '' );
}

slide(0);

style.css

@import "compass/css3";

$size: 50px;
$thickness: 5px;
$angle: 40deg;
$angleHover: 30deg;
$angleActive: 25deg;

@mixin arrowTransform( $angle, $x: 0, $y: 0 ) {
  i:first-child {
    transform: translate( $x, $y ) rotate( $angle );
  }

  i:last-child {
    transform: translate( $x, -$y ) rotate( -$angle );
  }
}

body {
  background: #33ab83; 
}
  
button {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: 0;
}

.paginate {
  position: relative;
  margin: 10px;
  width: $size;
  height: $size;
  cursor: pointer;
  transform: translate3d(0,0,0); // fixes flicker in webkit

  position: absolute;
  top: 50%;
  margin-top: -20px;
  -webkit-filter: drop-shadow( 0 2px 0px rgba(0,0,0,0.2) );

  i {
    position: absolute;
    top: 40%;
    left: 0;
    width: $size;
    height: $thickness;
    border-radius: $thickness / 2;
    background: #fff;

    transition: all 0.15s ease;
  }

  &.left {
    right: 58%;

    i {
      transform-origin: 0% 50%
    }

    @include arrowTransform( $angle, 0, -1px );

    &:hover {
      @include arrowTransform( $angleHover, 0, -1px );
    }

    &:active {
      @include arrowTransform( $angleActive, 1px, -1px );
    }

    &[data-state=disabled] {
      @include arrowTransform( 0deg, -5px, 0 );

      &:hover {
        @include arrowTransform( 0deg, -5px, 0 );
      }
    }
  }

  &.right {
    left: 58%;

    i {
      transform-origin: 100% 50%
    }

    @include arrowTransform( $angle, 0, 1px );

    &:hover {
      @include arrowTransform( $angleHover, 0, 1px );
    }

    &:active {
      @include arrowTransform( $angleActive, 1px, 1px );
    }

    &[data-state=disabled] {
      @include arrowTransform( 0deg, 5px, 0 );

      &:hover {
        @include arrowTransform( 0deg, 5px, 0 );
      }
    }
  }

  &[data-state=disabled] {
    opacity: 0.3;
    cursor: default;
  }
}



.counter {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -15px;
  font-size: 30px;
  font-family: Helvetica, sans-serif;
  text-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.2 );
  color: #fff;
}