index.jade

doctype html
html(lang="en")
head
  meta(charset="UTF-8")
  title Messing with Buttons styles
  link(rel="stylesheet", href="assets/css/style.css")
  link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css")
  
body
  .container.row
    h1.col--2-of-2 Messing with Buttons styles
    hr
  
    .row
      .col.col--1-of-2
        a(href="").one A Button

        
      .col.col--1-of-2
        a(href="").two A Button
    
    .row
      .col.col--1-of-2
        a(href="").three A Button

        
      .col.col--1-of-2
        a(href="").four A Button

  
    .row  
      .col.col--1-of-2
        a(href="").five A Button

        
      .col.col--1-of-2
        a(href="").six A Button
          
    .row        
      .col.col--1-of-2
        a(href="")#button1.seven
          .span#default1 Click me!
          .span.hidden#ok1 <i class="fa fa-check"></i> Ok!
          .span.hidden#error1 <i class="fa fa-times"></i> Error!
        
      .col.col--1-of-2
        a(href="")#button2.height
          .span#default2 Click me!
          .span.hidden#ok2 <i class="fa fa-check"></i> Ok!
          .span.hidden#error2 <i class="fa fa-times"></i> Error!

    .row
      .col.col--2-of-2
        p A big thanks to Travis Neilson from <a class="link_youtube" href="https://www.youtube.com/user/DevTipsForDesigners/">DevTips</a>, always a huge source of inspiration and of good mood for me!

<script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
script(src="assets/js/script.js")