Flat material design (ish) buttons

Flat-material-design-(ish)-buttons.markdown

Flat material design (ish) buttons

Some simple flat buttons with a material design style effect on click and SVG icons

A Pen by Nick Pearson on CodePen.

License.

index.html

<div class="wrapper">
  <button>Button</button>
  <button class="button_action"><span class="icon"><svg class="svg icon_svg" xmlns="http://www.w3.org/2000/svg" width="141.73" height="141.73" viewBox="0 0 141.73 141.73"><path d="M70.865 3.47l21.9 44.37 48.966 7.115-35.43 34.54 8.366 48.768-43.798-23.026-43.798 23.026 8.365-48.77L0 54.956l48.967-7.115z"/></svg></span> Action</button>
  <button class="button_affirm"><span class="icon"><svg class="svg icon_svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M306.803 328.896L192.5 443.196l-78.895-78.893.697-.693L0 249.303l78.895-78.895 114.303 114.304 227.908-227.91L500 135.698l-199.318 199.32"/></svg></span> Confirm</button>
  <button class="button_danger"><span class="icon"><svg class="svg icon_svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M500 397.91L397.91 500 250 352.092 102.09 500 0 397.91 147.91 250 0 102.09 102.09 0 250 147.91 397.91 0 500 102.09 352.09 250 500 397.91z"/></span></svg> Cancel</button>
</div>

script.js

$( document ).ready( function( e )
{
  // Create + position ripple on click
  
  $( 'body' ).on( 'click' , 'button' , function( e )
  {
    var x = e.pageX - $( this ).offset().left;
    var y = e.pageY - $( this ).offset().top;
    
    $( this ).find( '.button_ripple' ).remove();
    
    $( '<span class="button_ripple"/>' ).appendTo( this ).css( { left:x , top:y } );
  });
  
  // Prevent clicking from applying :focus state style
  
  $( 'body' ).on( 'keydown' , function( e )
  {
    if( e.which == 9 )
    {
      $( 'body' ).addClass( 'keyboardfocus' );
    }
  });

  $( 'body' ).on( 'click' , function( e )
  {
    $( 'body' ).removeClass( 'keyboardfocus' );
  });
});

style.css

/* General */

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

html
{
  width:100%;
  height:100%;
}

body
{
  display:table;
  width:100%;
  height:100%;
  background:#e0e0e0;
  font-family:'Droid Sans',sans-serif;
  color:#505050;
}

.wrapper
{
  display:table-cell;
  text-align:center;
  vertical-align:middle; 
  font-size:1.25em;
}

/* Buttons */

button
{
  padding:0.5em 1em;
  overflow:hidden;
  position:relative;
  z-index:0;
  font-size:1em;
  font-family:inherit;
  color:white;
  border:none;
  background:#585b68;
  box-shadow:0 0 0 rgba(0,0,0,0.5);
  cursor:pointer;
  outline:none;
  transition:all 150ms ease;
  transform:translate3d(0,0,0);
  -webkit-font-smoothing:antialiased;
}

button::-moz-focus-inner { border:0; }

.keyboardfocus button:focus,
button:hover
{
  box-shadow:0.25em 0.25em 0 rgba(0,0,0,0.15);
  transform:translate(-0.125em,-0.125em);
}

button:active
{
  background:#42454e;
  box-shadow:0 0 0 rgba(0,0,0,0.5);
  transform:translate3d(0,0,0);
  transition-duration:50ms;
}

/* Colours */

.button_action { background:#03a0e0; }
.button_action:active { background:#0387bf; }

.button_affirm { background:#84ba0a; }
.button_affirm:active { background:#6f9e09; }

.button_danger { background:#e34704; }
.button_danger:active { background:#c5471d; }

/* Ripple */

.button_ripple
{
  display:block;
  width:0;
  height:0;
  margin:-1em;
  position:absolute;
  z-index:-1;
  top:50%;
  left:50%;
  border:1em solid black;
  border-radius:1em;
  animation-name:ripple;
  animation-duration:500ms;
  animation-iteration-count:1;
  animation-timing-function:ease-out;
  opacity:0;
}

@keyframes ripple
{
  0%
  {
    transform:scale(1);
    opacity:0.5;
  }
  100%
  {
    transform:scale(5);
    opacity:0;
  }
}

/* Icons */

.icon
{
  display:inline-block;
  width:0.75em;
  height:0.75em;
}

.icon_svg
{
  display:block;
  width:100%;
  height:100%;
}

.icon_svg path
{
  fill:currentColor;
}