A Pen by Tom.

A-classy-button-&-his-nice-hover-transition.markdown

A classy button & his nice hover transition

As in the title, this is a classy button with an original & nice hover transition. The button contains a "triangle", generated with the border css property and a little help from jQuery.

A Pen by Tom on CodePen.

License.

index.html

<!-- http://codepen.io/thms/pen/DGeEo -->

<section class="section wrapper">
  <h1>Classy button<span> & nice hover transition</span></h1>
  <ul class="row">
    <li class="col col-1-3">
      <button class="button">
        <span class="triangle">A triangle</span>
        <span class="button-title">This is a button</span>
      </button>
    </li>
    <li class="col col-1-3">
      <button class="button">
        <span class="triangle">A triangle</span>
        <span class="button-title">This is a button</span>
      </button>
    </li>
    <li class="col col-1-3">
      <button class="button">
        <span class="triangle">A triangle</span>
        <span class="button-title">This is a button</span>
      </button>
    </li>
    <li class="col col-1-3">
      <button class="button">
        <span class="triangle">A triangle</span>
        <span class="button-title">This is a button</span>
      </button>
    </li>
    <li class="col col-1-3">
      <button class="button">
        <span class="triangle">A triangle</span>
        <span class="button-title">This is a button</span>
      </button>
    </li>
    <li class="col col-1-3">
      <button class="button">
        <span class="triangle">A triangle</span>
        <span class="button-title">This is a button</span>
      </button>
    </li>
  </ul>
</section>

script.js

/*
 * debouncedresize: special jQuery event that happens once after a window resize
 *
 * latest version and complete README available on Github:
 * https://github.com/louisremi/jquery-smartresize
 *
 * Copyright 2012 @louis_remi
 * Licensed under the MIT license.
 *
 * This saved you an hour of work? 
 * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
 */
(function($) {

var $event = $.event,
	$special,
	resizeTimeout;

$special = $event.special.debouncedresize = {
	setup: function() {
		$( this ).on( "resize", $special.handler );
	},
	teardown: function() {
		$( this ).off( "resize", $special.handler );
	},
	handler: function( event, execAsap ) {
		// Save the context
		var context = this,
			args = arguments,
			dispatch = function() {
				// set correct event type
				event.type = "debouncedresize";
				$event.dispatch.apply( context, args );
			};

		if ( resizeTimeout ) {
			clearTimeout( resizeTimeout );
		}

		execAsap ?
			dispatch() :
			resizeTimeout = setTimeout( dispatch, $special.threshold );
	},
	threshold: 150
};

})(jQuery);


/* 
 * A triangle
 * http://codepen.io/thms/pen/DGeEo
 */
var $button = $('.button');

function triangle(){
  $button.each( function() {
    var $self            = $(this),
        containerHeight  = $self.outerHeight(),
        containerWidth   = $self.outerWidth(),
        $aTriangle       = $self.find( '.triangle' );
        $aTriangle.css( 'border-width', '0 0 ' + containerHeight + 'px ' + containerWidth + 'px' );
  });
}

$(window)
  .on('debouncedresize', triangle)
  .trigger('debouncedresize');

style.scss

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

$black:           #000;
$blackAlt:        #1b1b1b;
$blue:            #01bdee;
$white:           #fff;

*, 
*:before, 
*:after {
  box-sizing: border-box;
}

::selection {
  background: $blackAlt;
}

body {
  background: $blue;
  font-family: 'Lato', sans-serif;
}

a,
button {
  outline: none;
}

h1 {
  color: white;
  font-size: 6rem;
  font-weight: 300;
  line-height: 5.5rem;
  margin: 0.3em 0 1em 0;
  
  span {
    display: block;
    font-weight: 700;
  }
}

ul {
  font-size: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  font-size: 1rem;
  line-height: 1.5em;
  padding: 1px .5px;
}

.row {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.col {
  display: inline-block;
}

.col-1-3 {
  width: 33.33%;
}

@media (max-width: 768px) {
  .col {
    display: block;
  }
  
  .col-1-3 {
    width: 100%;
  }
  
  h1 {
    font-size: 3rem;
    line-height: 3rem;
  }
}

.wrapper {
  padding: 30px;
  margin: 0 auto;
  max-width: 1260px;
}

.button {
  border: 0;
  background-color: transparentize($blackAlt, 0.2);
  box-shadow: 0 0 15px 0 transparentize($black, 0.6);
  color: white;
  letter-spacing: 2px;
  margin-bottom: 1px;
  overflow: hidden;
  padding: 75px 30px;
  position: relative;
  text-transform: uppercase;
  transition: all 0.3s ease;
  width: 100%;
  
  &:hover,
  &:focus {
    background-color: $blackAlt;
    box-shadow: 0 0 3px 0 transparentize($black, 0.8);

    .triangle {
      // I know, I know...
      border-width: 0 0 0 0 !important;
    }
  }

  &:active {
    box-shadow: 0 0 0 0 $black;
  }
}

.triangle {
  bottom: 0;
  border-color: transparent transparent transparentize(#141414, 0.9) transparent;
  border-style: solid;
  display: block;
  height: 0;
  position: absolute;
  right: 0;
  text-indent: -5000px;
  transition: border 0.35s ease;
  width: 0;
}