CodePen Embed - CSS flat buttons


  <div class="container">
    <div class="sixteen columns">
      <h1 class="remove-bottom" style="margin-top: 40px">Beautiful Flat Buttons</h1>
           <hr />
    </div>
    <div class="one-third column">
      <h3>Sun Flower Flat Button</h3>
      <p><input type="submit" value="Sun Flower" class="sun-flower-button">
</p>
    </div>
    <div class="one-third column">
      <h3>Orange Flat Button</h3>
<p><input type="submit" value="Orange" class="orange-flat-button">
</p>      
    </div>
    <div class="one-third column">
      <h3>Carrot Flat Button</h3>
      <p><input type="submit" value="Carrot" class="carrot-flat-button">
</p>
    </div>

<div class="sixteen columns">
    
    </div>
    <div class="one-third column">
      <h3>Pumpkin Flat Button</h3>
      <p><input type="submit" value="Pumpkin" class="pumpkin-flat-button">
</p>
    </div>
    <div class="one-third column">
      <h3>Alizarin Flat Button</h3>
<p><input type="submit" value="Alizarin" class="alizarin-flat-button">
</p>      
    </div>
    <div class="one-third column">
      <h3>Pomegranate Flat Button</h3>
      <p><input type="submit" value="Pomegranate" class="pomegranate-flat-button">
</p>
    </div>

<div class="sixteen columns">
    
    </div>
    <div class="one-third column">
      <h3>Turquoise Flat Button</h3>
      <p><input type="submit" value="Turquoise" class="turquoise-flat-button">
</p>
    </div>
    <div class="one-third column">
      <h3>Green Sea Flat Button</h3>
<p><input type="submit" value="Green Sea" class="green-sea-flat-button">
</p>      
    </div>
    <div class="one-third column">
      <h3>Emerald Flat Button</h3>
      <p><input type="submit" value="Emerald" class="emerald-flat-button">
</p>
    </div>
        
<div class="sixteen columns">
    
    </div>
    <div class="one-third column">
      <h3>Nephritis Flat Button</h3>
      <p><input type="submit" value="Nephritis" class="nephritis-flat-button">
</p>
    </div>
    <div class="one-third column">
      <h3>Peter River Flat Button</h3>
<p><input type="submit" value="Peter River" class="peter-river-flat-button">
</p>      
    </div>
    <div class="one-third column">
      <h3>Belize Hole Flat Button</h3>
      <p><input type="submit" value="Belize Hole" class="belize-hole-flat-button">
</p>
    </div>
<div class="sixteen columns">
    
    </div>
    <div class="one-third column">
      <h3>Amethyst Flat Button</h3>
      <p><input type="submit" value="Amethyst" class="amethyst-flat-button">
</p>
    </div>
    <div class="one-third column">
      <h3>Wisteria Flat Button</h3>
<p><input type="submit" value="Wisteria" class="wisteria-flat-button">
</p>      
    </div>
    <div class="one-third column">
      <h3>Wet Asphalt Flat Button</h3>
      <p><input type="submit" value="Wet Asphalt" class="wet-asphalt-flat-button">
</p>
    </div>
        
       <div class="sixteen columns">
    
    </div>
    <div class="one-third column">
      <h3>Midnight Blue Flat Button</h3>
      <p><input type="submit" value="Midnight Blue" class="midnight-blue-flat-button">
</p>
    </div>
    <div class="one-third column">
      <h3>Clouds Flat Button</h3>
<p><input type="submit" value="Clouds" class="clouds-flat-button">
</p>      
    </div>
    <div class="one-third column">
      <h3>Silver Flat Button</h3>
      <p><input type="submit" value="Silver" class="silver-flat-button">
</p>
    </div>
        
               <div class="sixteen columns">
    
    </div>
    <div class="one-third column">
      <h3>Concrete Blue Flat Button</h3>
      <p><input type="submit" value="Concrete Blue" class="concrete-flat-button">
</p>
    </div>
    <div class="one-third column">
      <h3>Asbestos Flat Button</h3>
<p><input type="submit" value="Asbestos" class="asbestos-flat-button">
</p>      
    </div>
    <div class="one-third column">
      <h3>Graphite Flat Button</h3>
      <p><input type="submit" value="Graphite" class="graphite-flat-button">
</p>
    </div>
       <div class="sixteen columns">
           
      <hr /> 
        Inspired by <a href="http://flatuicolors.com/">FLAT UI COLOURS</a>.
        </div>
  </div><!-- container -->

@charset "utf-8";
/* CSS Document */

body {
  background-color:#f9f9f9;
  text-align:center;}

h1, h2, h3, h4, h5, h6 {font-family: 'Montez', cursive;
color:#2d2d2d;}

h1 {
  font-size:46px;}
h3 {
  font-size:28px;}
a {color:#FF9715;}
a:hover{color:#454545;}
  

/* #Buttons
==================================================*/

/* #Sun Flower Button
==================================================*/
.sun-flower-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #f1c40f;
  border: 0;
  border-bottom: 2px solid #e2b607;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #e2b607;
  box-shadow: inset 0 -2px #e2b607;
}
.sun-flower-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Orange Flat Button
==================================================*/
.orange-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #f39c12;
  border: 0;
  border-bottom: 2px solid #e8930c;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #e8930c;
  box-shadow: inset 0 -2px #e8930c;
}
.orange-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Carrot Flat Button
==================================================*/
.carrot-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #e67e22;
  border: 0;
  border-bottom: 2px solid #da751c;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #da751c;
  box-shadow: inset 0 -2px #da751c;
}
.carrot-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Pumpkin Flat Button
==================================================*/
.pumpkin-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #d35400;
  border: 0;
  border-bottom: 2px solid #c54e00;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #c54e00;
  box-shadow: inset 0 -2px #c54e00;
}
.pumpkin-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Alizarin Flat Button
==================================================*/
.alizarin-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #e74c3c;
  border: 0;
  border-bottom: 2px solid #db4334;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #db4334;
  box-shadow: inset 0 -2px #db4334;
}
.alizarin-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Pomegranate Flat Button
==================================================*/
.pomegranate-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #c0392b;
  border: 0;
  border-bottom: 2px solid #b53224;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #b53224;
  box-shadow: inset 0 -2px #b53224;
}
.pomegranate-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Turquoise Flat Button
==================================================*/
.turquoise-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #1abc9c;
  border: 0;
  border-bottom: 2px solid #12ab8d;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #12ab8d;
  box-shadow: inset 0 -2px #12ab8d;
}
.turquoise-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Green Sea Flat Button
==================================================*/
.green-sea-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #16a085;
  border: 0;
  border-bottom: 2px solid #14947b;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #14947b;
  box-shadow: inset 0 -2px #14947b;
}
.green-sea-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Emerald Flat Button
==================================================*/
.emerald-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2ecc71;
  border: 0;
  border-bottom: 2px solid #28be68;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #28be68;
  box-shadow: inset 0 -2px #28be68;
}
.emerald-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Nephritis Flat Button
==================================================*/
.nephritis-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #27ae60;
  border: 0;
  border-bottom: 2px solid #219d55;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #219d55;
  box-shadow: inset 0 -2px #219d55;
}
.nephritis-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Peter River Flat Button
==================================================*/
.peter-river-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #3498db;
  border: 0;
  border-bottom: 2px solid #2a8bcc;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2a8bcc;
  box-shadow: inset 0 -2px #2a8bcc;
}
.peter-river-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Belize Hole Sea Flat Button
==================================================*/
.belize-hole-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2980b9;
  border: 0;
  border-bottom: 2px solid #2475ab;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2475ab;
  box-shadow: inset 0 -2px #2475ab;
}
.belize-hole-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Amethyst Flat Button
==================================================*/
.amethyst-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #9b59b6;
  border: 0;
  border-bottom: 2px solid #8d4ca7;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #8d4ca7;
  box-shadow: inset 0 -2px #8d4ca7;
}
.amethyst-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Wisteria Flat Button
==================================================*/
.wisteria-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #8e44ad;
  border: 0;
  border-bottom: 2px solid #80399d;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #80399d;
  box-shadow: inset 0 -2px #80399d;
}
.wisteria-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Wet Asphalt Flat Button
==================================================*/
.wet-asphalt-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #34495e;
  border: 0;
  border-bottom: 2px solid #263849;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #263849;
  box-shadow: inset 0 -2px #263849;
}
.wet-asphalt-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Wet Asphalt Flat Button
==================================================*/
.wet-asphalt-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #34495e;
  border: 0;
  border-bottom: 2px solid #263849;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #263849;
  box-shadow: inset 0 -2px #263849;
}
.wet-asphalt-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Midnight Blue Flat Button
==================================================*/
.midnight-blue-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #2c3e50;
  border: 0;
  border-bottom: 2px solid #22303f;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #22303f;
  box-shadow: inset 0 -2px #22303f;
}
.midnight-blue-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Clouds Flat Button
==================================================*/
.clouds-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color:#454545;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #ecf0f1;
  border: 0;
  border-bottom: 2px solid #dadedf;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #dadedf;
  box-shadow: inset 0 -2px #dadedf;
}
.clouds-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Silver Flat Button
==================================================*/
.silver-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color:white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #bdc3c7;
  border: 0;
  border-bottom: 2px solid #acb2b7;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #acb2b7;
  box-shadow: inset 0 -2px #acb2b7;
}
.silver-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Concrete Flat Button
==================================================*/
.concrete-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color:white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #859596;
  border: 0;
  border-bottom: 2px solid #95a5a6;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #95a5a6;
  box-shadow: inset 0 -2px #95a5a6;
}
.concrete-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Asbestos Flat Button
==================================================*/
.asbestos-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color:white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #7f8c8d;
  border: 0;
  border-bottom: 2px solid #6d7b7c;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #6d7b7c;
  box-shadow: inset 0 -2px #6d7b7c;
}
.asbestos-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Asbestos Flat Button
==================================================*/
.asbestos-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color:white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #7f8c8d;
  border: 0;
  border-bottom: 2px solid #6d7b7c;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #6d7b7c;
  box-shadow: inset 0 -2px #6d7b7c;
}
.asbestos-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* #Graphite Flat Button
==================================================*/
.graphite-flat-button {
  position: relative;
  vertical-align: top;
  width: 100%;
  height: 60px;
  padding: 0;
  font-size: 22px;
  color:white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  background: #454545;
  border: 0;
  border-bottom: 2px solid #2f2e2e;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #2f2e2e;
  box-shadow: inset 0 -2px #2f2e2e;
}
.graphite-flat-button:active {
  top: 1px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */

    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 48px; }
        .container .offset-by-two                   { padding-left: 96px; }
        .container .offset-by-three                 { padding-left: 144px; }
        .container .offset-by-four                  { padding-left: 192px; }
        .container .offset-by-five                  { padding-left: 240px; }
        .container .offset-by-six                   { padding-left: 288px; }
        .container .offset-by-seven                 { padding-left: 336px; }
        .container .offset-by-eight                 { padding-left: 384px; }
        .container .offset-by-nine                  { padding-left: 432px; }
        .container .offset-by-ten                   { padding-left: 480px; }
        .container .offset-by-eleven                { padding-left: 528px; }
        .container .offset-by-twelve                { padding-left: 576px; }
        .container .offset-by-thirteen              { padding-left: 624px; }
        .container .offset-by-fourteen              { padding-left: 672px; }
        .container .offset-by-fifteen               { padding-left: 720px; }
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }

This Pen is owned by Pali Madra on CodePen.

See more by @palimadra on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.