/ Button

An alternative approach to paper button component

An alternative approach to paper button component

Alternative Polymer Style Buttons

An alternative approach to paper button component.

Made with

Html
Css/scss
JavaScript

html

<div><h1>Polymer-Style Button</h1></div>
<section id="demo">
  <div><h3>Flat</h3>
    <button type="button" inky>Default</button>
    <button type="button" inky class="red">R</button>
    <button type="button" inky class="green">G</button>
    <button type="button" inky class="blue">B</button>
  </div>
  <div><h3>Raised</h3>
    <button type="button" inky raised>Default</button>
    <button type="button" inky raised class="red">R</button>
    <button type="button" inky raised class="green">G</button>
    <button type="button" inky raised class="blue">B</button>
  </div>
  <div><h3>Disabled</h3>
    <button type="button" inky disabled>Flat</button>
    <button type="button" inky raised disabled>Raised</button>
  </div>
  <div><h3>Icons</h3>
    <button type="button" size="34" inky icon><svg viewBox="0 0 24 24" style="pointer-events: none; width: 24px; height: 24px; display: block;"><g><path d="M12,21.4L10.6,20C5.4,15.4,2,12.3,2,8.5C2,5.4,4.4,3,7.5,3c1.7,0,3.4,0.8,4.5,2.1C13.1,3.8,14.8,3,16.5,3C19.6,3,22,5.4,22,8.5c0,3.8-3.4,6.9-8.6,11.5L12,21.4z"></path></g></svg></button>
    <button type="button" inky raised icon><img height="24" width="24" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"/></button>
  </div>
  <div><h3>Custom Shapes</h3>
    <button type="button" inky class="star">Star (svg)</button>
    <button type="button" inky class="heart">Heart (svg)</button>
  </div>
  <div><h3>Forced Overflow</h3>
    <button type="button" inky raised class="overflow">Default</button>
    <button type="button" inky raised class="star overflow">Star (svg)</button>
    <button type="button" inky raised class="heart overflow">Heart (svg)</button>
  </div>
  <div><h3>Animations</h3>
    <button type="button" inky class="star spin">Spinning Star</button>
    <button type="button" inky class="heart spin">Spinning Heart</button>
  </div>
  <div><h3>Overflowed Animations</h3>
    <button type="button" inky class="star spin overflow">Spinning Star</button>
    <button type="button" inky class="heart spin overflow">Spinning Heart</button>
  </div>
</section>

Css

@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

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

body, html{
  font-family: 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
  min-width: 320px;
  
  font-size: 20px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  
  background: #fafafa;
}
h1,h2,h3,h4,h5,h6{
  text-align: left;
  font-family: 'Pacifico', cursive;
  color: #ad5353;
}
h1{
  text-align: center;
  margin: 0;
}
#demo{
  width: auto;
  width: 600px;
  margin: 50px auto;
}

[inky]{
  position: relative;
  
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  overflow: hidden;
  border: 0;
  outline: 0;
  
  background: 0;
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  
  -webkit-transition: box-shadow .2s;
  -moz-transition: box-shadow .2s;
  -ms-transition: box-shadow .2s;
  -o-transition: box-shadow .2s;
  transition: box-shadow .2s;
  
  
  cursor: pointer;
  
  .touch{
    background: rgba(100,100,100,.1);
    pointer-events: none;
    border-radius: 100%;
  }
  &.blue .touch{
    background: rgba(0,0,255,.2);
  }
  &.red .touch{
    background: rgba(255,0,0,.2);
  }
  &.green .touch{
    background: rgba(0,255,0,.2);
  }
  &.star .touch{
    border-radius: 0;
    background: none;
    background-image: url("http://img3.wikia.nocookie.net/__cb20140518063015/vocaloid/images/d/de/Star_icon.svg");
    background-position: center center;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    opacity: .5;
  }
  
  &.heart .touch{
    border-radius: 0;
    background: none;
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/42/Love_Heart_SVG.svg");
    background-position: center center;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    opacity: .5;
  }
  
  &.spin .touch{
    animation: animationFrames linear .5s;
    animation-iteration-count: infinite;
    -webkit-animation: animationFrames linear .5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: animationFrames linear .5s;
    -moz-animation-iteration-count: infinite;
    -o-animation: animationFrames linear .5s;
    -o-animation-iteration-count: infinite;
    -ms-animation: animationFrames linear .5s;
    -ms-animation-iteration-count: infinite;
  }
  &.overflow{
    overflow: visible;
  }
  
  
  &[raised],.raised{
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
  }
  &[icon]{
    padding: 8px;
    border-radius: 100%;
    font-size: 35px;
    line-height: 0;
  }
  &:focus, :active{
 	 -moz-outline-style: none;
  }
  
  &[raised]:active,.raised:active{
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
  }
  
  &[disabled],.disabled,[disabled]:active,.disabled:active{
    background: #eee;
    color: #aaa;
    box-shadow: none !important;
  }
}

@keyframes animationFrames{
  0% {
    transform:  rotate(0deg);
  }
  100% {
    transform:  rotate(359deg);
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  rotate(0deg);
  }
  100% {
    -moz-transform:  rotate(359deg);
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  rotate(0deg);
  }
  100% {
    -webkit-transform:  rotate(359deg);
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  rotate(0deg);
  }
  100% {
    -o-transform:  rotate(359deg);
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  rotate(0deg);
  }
  100% {
    -ms-transform:  rotate(359deg);
  }
}

JavaScript

$(function(){
  
  $.easing.easeOutQuart = function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
  };
  $('[inky]:not([disabled],.disabled)')
  .on('mousedown', function( e ){
    
    var button = $(this);
    var touch = $('<div><div/>');
    var size = button.outerWidth() * 1.9;
    var complete = false;
    
    $(document)
    .on('mouseup',function(){
      var a = {
        'opacity': '0'
      };
      if( complete === true ){
        size = size * 1.2;
        $.extend(a, {
          'height': size + 'px',
          'width': size + 'px',
          'margin-top': -(size)/2 + 'px',
          'margin-left': -(size)/2 + 'px'
        });
      }
        
      touch
      .animate(a, {
        duration: 500,
        complete: function(){touch.remove();},
        easing: 'swing'
      });
    });
    
    touch
    .addClass( 'touch' )
    .css({
      'position': 'absolute',
      'top': e.pageY-button.offset().top + 'px',
      'left': e.pageX-button.offset().left + 'px',
      'width': '0',
      'height': '0'
    });
    
    /* IE8 will not appendChild */
    button.get(0).appendChild(touch.get(0));
    
    touch
    .animate({
      'height': size + 'px',
      'width': size + 'px',
      'margin-top': -(size)/2 + 'px',
      'margin-left': -(size)/2 + 'px'
    }, {
      queue: false,
      duration: 500,
      'easing': 'easeOutQuart',
      'complete': function(){
        complete = true
      }
    });
  });
});

Demo

See the Pen Alternative Polymer Style Buttons by Shawn G (@ShawnCG) on CodePen.