A Pen by Riley Shaw.

index.html

<form>
  <button>pellentesque</button>
  <button>habitant</button>
  <button>morbi</button>
  <button>tristique</button>
  <button>senectus</button>
  <button>et</button>
  <button>netus</button>
  <button>et</button>
  <button>malesuada</button>
  <button>fames</button>
  <button>ac</button>
  <button>turpis</button>
  <button>egestas</button>
  <button>vestibulum</button>
  <button>tortor</button>
  <button>quam</button>
  <button>feugiat</button>
  <button>vitae</button>
  <button>ultricies</button>
  <button>eget</button>
  <button>tempor</button>
  <button>sit</button>
  <button>amet</button>
  <button>ante</button>
  <button>donec</button>
  <button>eu</button>
  <button>libero</button>
  <button>sit</button>
  <button>amet</button>
  <button>quam</button>
  <button>egestas</button>
  <button>semper</button>
</form>

Perspective-Buttons.markdown

Perspective Buttons

Playing around with rotateX and a bit of trig.

The perspective effect can be added to anything; a site where each content block was extruded could look interesting.

A Pen by Riley Shaw on CodePen.

License.

script.js

//$(function() {
  var height, normalizer;
  
  var perspectify = function() {
    var scrolltop = $(window).scrollTop();
    $('button').each(function() {
      var position = $(this).offset().top - scrolltop;
      var rotation = position * normalizer + 20;
      $(this).css({'-webkit-transform': 'rotateX(' + rotation + 'deg)',
                   '-moz-transform': 'rotateX(' + rotation + 'deg)',
                   '-ms-transform': 'rotateX(' + rotation + 'deg)',
                   '-o-transform': 'rotateX(' + rotation + 'deg)',
                   'transform': 'rotateX(' + rotation + 'deg)'
                  });
      $(this).attr('data-top', 25.6 * Math.sin(rotation * Math.PI / 180)); // 64 * 40% = 25.6
    });
  };
  
  $(window).resize(function() {
    height = $(this).height() - 64; // button height = 64px
    normalizer = - 40 / height // max desired degrees = 20
    perspectify();
  }).resize();
  
  $(window).scroll(function() {
    perspectify();
  });
  
  $('button').hover(
    function() {
      $(this).css('top', $(this).attr('data-top') / 4 + 'px');
    },
    function() {
      $(this).css('top', 0);
    }
  ).mousedown(
    function() {
      $(this).css('top', $(this).attr('data-top') + 'px');
    }
  ).mouseup(
    function() {
      $(this).css('top', 0);
    }
  );

  

//});

style.sass

@import "compass"
*
  outline: none
form
  text-align: justify
  width: 480px
  padding: 0 60px
  margin: auto
  z-index: -8
  &:after
    height: 0
    width: 100%
    display: inline-block
    content: ''
button
  z-index: 100
  display: inline-block
  height: 64px
  width: 180px
  margin-bottom: 64px
  position: relative
  border: 0
  background: black
  font-size: 18px
  color: white
  text-transform: uppercase
  font-weight: bold
  letter-spacing: 2px
  +transform-style
  +transition(top 500ms, color 500ms)
  &:before, &:after
    width: 100%
    height: 40%
    left: 0
    position: relative
    +transform-origin(0%, 0%)
    +rotateX(-90deg)
    content: ''
    position: absolute
    background-color: #fba
    +transition(height 500ms)
  &:before
    top: 0
  &:after
    top: 100%
  &:hover
    cursor: pointer
    &:before, &:after
      height: 30%
  &:active
    color: #08f
    &:before, &:after
      height: 0