<div class="container">
      <div class="row">
        <h1>Alternative Flat UI Buttons</h1>
      </div>
      <div class="row">
        <p>
          An experiment in making Flat-UI buttons appear more interactive. 
          Flat-UI is very pretty, but it has usability problems with indicating
          interactivty. Buttons are especially a problem for me. This is an 
          experiment to do a better job at indicating interactivity. Colors
          are borrowed from <a href="https://designmodo.github.com/Flat-UI/">Flat
          UI</a>.
        </p>
        <p>The css for this experiment is not a library, it's just a one-off
        experiment.</p>
      </div>
      <div class="row">
        <h2>Current</h2>
      </div>
      <div class="row">
        <div class="example">
          <button class="flat-butt">Default Button</button>
          <button class="flat-butt flat-primary-butt">Primary Button</button>
          <button class="flat-butt flat-info-butt">Info Button</button>
          <button class="flat-butt flat-danger-butt">Danger Button</button>
        </div>
      </div>
      <div class="row">
        <h2>Maintaining Flatness</h2>
      </div>
      <div class="row">
        <h3>Border</h3>
        <div class="example">
          <button class="flat-butt flat-border-butt">Default Button</button>
          <button class="flat-butt flat-primary-butt flat-border-butt flat-primary-border-butt">Primary Button</button>
          <button class="flat-butt flat-info-butt flat-border-butt flat-info-border-butt">Info Button</button>
          <button class="flat-butt flat-danger-butt flat-border-butt flat-danger-border-butt">Danger Button</button>
        </div>
      </div>
      <div class="row">
        <h3>Double Border</h3>
        <div class="example">
          <button class="flat-butt flat-double-butt">Default Button</button>
          <button class="flat-butt flat-primary-butt flat-double-butt flat-primary-double-butt">Primary Button</button>
          <button class="flat-butt flat-info-butt flat-double-butt flat-info-double-butt">Info Button</button>
          <button class="flat-butt flat-danger-butt flat-double-butt flat-danger-double-butt">Danger Button</button>
        </div>
      </div>
      <div class="row">
        <h3>Underline</h3>
        <div class="example">
          <button class="flat-butt flat-underline-butt">Default Button</button>
          <button class="flat-butt flat-primary-butt
              flat-underline-butt">Primary Button</button>
          <button class="flat-butt flat-info-butt
              flat-underline-butt">Info Button</button>
          <button class="flat-butt flat-danger-butt
              flat-underline-butt">Danger Button</button>
        </div>
      </div>
      <div class="row">
        <h2>Compromising Flatness</h2>
      </div>
      <div class="row">
        <h3>50% Gradient</h3>
        <div class="example">
          <button class="flat-butt flat-grad-butt">Default Button</button>
          <button class="flat-butt flat-primary-butt
            flat-primary-grad-butt">Primary Button</button>
          <button class="flat-butt flat-info-butt
            flat-info-grad-butt">Info Button</button>
          <button class="flat-butt flat-danger-butt
            flat-danger-grad-butt">Danger Button</button>
        </div>
      </div>
      <div class="row">
        <h3>Inner Shadow</h3>
        <div class="example">
          <button class="flat-butt flat-inner-butt">Default Button</button>
          <button class="flat-butt flat-primary-butt flat-inner-butt
            flat-primary-inner-butt">Primary Button</button>
          <button class="flat-butt flat-info-butt flat-inner-butt
            flat-info-inner-butt">Info Button</button>
          <button class="flat-butt flat-danger-butt flat-inner-butt
            flat-danger-inner-butt">Danger Button</button>
        </div>
      </div>
      <div class="row">
        <h3>Inner Shadow</h3>
        <div class="example">
          <button class="flat-butt flat-outer-butt">Default Button</button>
          <button class="flat-butt flat-primary-butt flat-outer-butt
            ">Primary Button</button>
          <button class="flat-butt flat-info-butt flat-outer-butt
            ">Info Button</button>
          <button class="flat-butt flat-danger-butt flat-outer-butt
            ">Danger Button</button>
        </div>
      </div>
      <div class="row">
        <h2>Final thoughts</h2>
      </div>
      <div class="row" <p="">
          These may not look as pretty, but usability should come before
          beauty as frustrating users is not a beautiful experience.
        <p></p>
      </div>
    </div>

body {
  color: #34495E;
  font-size: 17px;
  background-image: url(https://subtlepatterns.com/patterns/kindajean.png);
}
a {
  color: #1abc9c;
}
a: hover {
  color: #2fe2bf;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: 10px 0;
}
h1 {
  font-size: 180%;
}
h2 {
  font-size: 150%;
}
h3 {
  color: #95A5A6;
}
.container {
  margin: 5px auto;
  width: 80%;
}
.row {
  margin: 5px 0;
  padding: 5px;
}
button {
  width: 200px;
}

.flat-butt {
  display: inline-block;
  margin: 0 5px;
  border-radius: 6px;
  font-family: "Lato", sans-serif;
  font-size: 16.5px;
  padding: 12px 20px;
  border: 0;
  background: #34495E;
  color: #FFF;
  cursor: pointer;
  outline: 0;
}
.flat-butt:hover {
  background: #005580;
}
.flat-primary-butt {
  background: #1abc9c;
}
.flat-primary-butt:hover {
  background: #2fe2bf;
}
.flat-info-butt {
  background: #3498db;
}
.flat-info-butt:hover {
  background: #5dade2;
}
.flat-danger-butt {
  background: #e74c3c;
}
.flat-danger-butt:hover {
  background: #ec7063;
}
.flat-border-butt {
  padding: 8px 20px;
  border: 4px solid #2C3E50;
}
.flat-border-butt:hover {
  border: 4px solid #2C3E50;
}
.flat-primary-border-butt {
  border-color: #16A085;
}
.flat-primary-border-butt:hover {
  border-color: #27AE60;
}
.flat-info-border-butt {
  border-color: #2980B9;
}
.flat-info-border-butt:hover {
  border-color: #2980B9;
}
.flat-danger-border-butt {
  border-color: #C0392B;
}
.flat-danger-border-butt:hover {
  border-color: #C0392B;
}
.flat-double-butt {
  padding: 8px 20px;
  border: 3px solid #FFF;
  box-shadow: #34495E 0px 0px 0px 3px;
}
.flat-double-butt:hover {
  box-shadow: #005580 0px 0px 0px 3px;
}
.flat-primary-double-butt {
  box-shadow: #1abc9c 0px 0px 0px 3px;
}
.flat-primary-double-butt:hover {
  box-shadow: #2fe2bf 0px 0px 0px 3px;
}
.flat-info-double-butt {
  box-shadow: #3498db 0px 0px 0px 3px;
}
.flat-info-double-butt:hover {
  box-shadow: #5dade2 0px 0px 0px 3px;
}
.flat-danger-double-butt {
  box-shadow: #e74c3c 0px 0px 0px 3px;
}
.flat-danger-double-butt:hover {
  box-shadow: #ec7063 0px 0px 0px 3px;
}
.flat-underline-butt {
  text-decoration: underline;
}
.flat-grad-butt {
  background-image: linear-gradient(#34495E 50%, #2C3E50 50%);
}
.flat-primary-grad-butt {
  background-image: linear-gradient(#1ABC9C 50%, #16A085 50%);
}
.flat-info-grad-butt {
  background-image: linear-gradient(#3498DB 50%, #2980B9 50%);
}
.flat-danger-grad-butt {
  background-image: linear-gradient(#E74C3C 50%, #C0392B 50%);
}
.flat-inner-butt {
  padding: 11px 0px;
  box-shadow: inset #2C3E50 -3px -3px 0px;
}
.flat-primary-inner-butt {
  background: #1ABC9C;
  box-shadow: inset #16A085 -3px -3px 0px;
}
.flat-info-inner-butt {
  box-shadow: inset #2980B9 -3px -3px 0px;
}
.flat-danger-inner-butt {
  box-shadow: inset #C0392B -3px -3px 0px;
}
.flat-outer-butt {
  padding: 11px 0px;
  box-shadow: #BDC3C7 2px 2px 0px;
}