!buttons

buttons.markdown

!buttons

Simple color buttons.

A Pen by Steven Hagen on CodePen.

License.

index.html

<div class="header">
  <h1>buttons</h1>

<div class="wrapper">
  <div class="floated mono">
    <p><input type="button" value="press me" class="button dark-button"></p>
    <p><input type="button" value="press me" class="button gray-button"></p>
    <p><input type="button" value="press me" class="button light-button"></p>
  </div>
  
  <div class="floated colored">
    <p><input type="button" value="press me" class="button violet-button"></p>
    <p><input type="button" value="press me" class="button red-button"></p>
    <p><input type="button" value="press me" class="button orange-button"></p>

    <p><input type="button" value="press me" class="button yellow-button"></p>
    <p><input type="button" value="hover me" class="button green-light-button"></p>
    <p><input type="button" value="press me" class="button acqua-button"></p>
 
    <p><input type="button" value="press me" class="button blue-light-button"></p>
    <p><input type="button" value="press me" class="button blue-button"></p>
  </div>
</div><!-- .wrapper -->

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);

body {
  font-size: 0.8em;
  padding: 0 1em 1em;
  text-align: center;
  background-color: #2b2b2b;
}
a {
  text-decoration: none;
}
.floated p {
  font-size: 0.8em;
  padding: 0 0.5em 0.5em;
  text-align: center;
  display: inline-block;
  margin: 2px 2px;
  font-family: "Open Sans Condensed", sans-serif;
}
.header h1 {
  font-family: "Open Sans Condensed", sans-serif;
  color: #ddd;
  font-size: 3.4em;
  text-shadow: 0 0 2px #afaeae, 0 1px 2px #939393, 0 2px 2px #6f6f6f,
    0 -1px 0 #fff;
}
.header h1 span {
  color: #f1f1f1;
}

/** ====================================================================
    !Buttons
    ================================================================= */
.button,
.button:hover {
  cursor: pointer;
  border-top: none; /* fix for input button/submit element */
  border-left: none; /* fix for input button/submit element */
  border-right: none; /* fix for input button/submit element */
  transition: background 0.3s linear, border-bottom-color 0.3s linear;
}
a.button {
  display: inline-block;
}

.button {
  font-family: "Open Sans Condensed", sans-serif;
  color: #efefef;
  padding: 0.8em 1.4em;
  border-radius: 0.4em;
  border-bottom-width: 0.2em;
  border-bottom-style: solid;
}

.button:hover {
  color: #fff;
}

.button:active {
  transform: translate(0, 0.18em);
  border-bottom-width: 0.1em;
  margin-bottom: 0.1em;
}

.button:focus {
  outline: none;
}

/** ====================================================================
    Mono Colors Buttons
    ================================================================= */

/** Dark Button */
.dark-button {
  text-shadow: 0 0.1em 1px #000000;
  background: #171617;
  border-bottom-color: #000000;
  box-shadow: 0 0 0 0.04em #000;
}

.dark-button:hover {
  background: #252525;
  border-bottom-color: #171617;
}

/** Gray Button */
.gray-button {
  text-shadow: 0 0.1em 1px #252525;
  background: #333233;
  border-bottom-color: #252525;
  box-shadow: 0 0 0 0.04em #171617;
}

.gray-button:hover {
  background: #484748;
  border-bottom-color: #333233;
}

/** Gray Light Button */
.light-button {
  text-shadow: 0 0.1em 1px #676567;
  background: #9c9a9d;
  border-bottom-color: #676567;
  box-shadow: 0 0 0 0.04em #676567;
}

.light-button:hover {
  background: #c9c5c9;
  border-bottom-color: #9c9a9d;
}

/** ====================================================================
    Colored Buttons
    ================================================================= */

/** Violet Button */
.violet-button {
  text-shadow: 0 0.1em 1px #a50065;
  background: #da0086;
  border-bottom-color: #a50065;
  box-shadow: 0 0 0 0.04em #7a004b;
}

.violet-button:hover {
  background: #da59a2;
  border-bottom-color: #da0086;
}

/** Red Button */
.red-button {
  text-shadow: 0 0.1em 1px #cc2b27;
  background: #ff362e;
  border-bottom-color: #cc2b27;
  box-shadow: 0 0 0 0.04em #a2221f;
}

.red-button:hover {
  background: #ff615f;
  border-bottom-color: #ff362e;
}

/** Orange Button */
.orange-button {
  text-shadow: 0 0.1em 1px #cb9a00;
  background: #f3b800;
  border-bottom-color: #cb9a00;
  box-shadow: 0 0 0 0.04em #826300;
}

.orange-button:hover {
  background: #f3d13b;
  border-bottom-color: #f3b800;
}

/** Yellow Button */
.yellow-button {
  text-shadow: 0 0.1em 1px #bfbd00;
  background: #e5e300;
  border-bottom-color: #bfbd00;
  box-shadow: 0 0 0 0.04em #6b6a00;
}

.yellow-button:hover {
  background: #fffc4c;
  border-bottom-color: #e5e300;
}

/** Green Light Button */
.green-light-button {
  text-shadow: 0 0.1em 1px #7fa736;
  background: #afe54b;
  border-bottom-color: #7fa736;
  box-shadow: 0 0 0 0.04em #63812a;
}

.green-light-button:hover {
  background: #c7f366;
  border-bottom-color: #afe54b;
}

/** Acqua Button */
.acqua-button {
  text-shadow: 0 0.1em 1px #007270;
  background: #008c8a;
  border-bottom-color: #007270;
  box-shadow: 0 0 0 0.04em #006a68;
}

.acqua-button:hover {
  background: #00c2c1;
  border-bottom-color: #008c8a;
}

/** Blue Light Button */
.blue-light-button {
  text-shadow: 0 0.1em 1px #2d80a5;
  background: #3daedf;
  border-bottom-color: #2d80a5;
  box-shadow: 0 0 0 0.04em #1f5871;
}

.blue-light-button:hover {
  background: #73c9ee;
  border-bottom-color: #3daedf;
}

/** Blue Button */
.blue-button {
  text-shadow: 0 0.1em 1px #1f5871;
  background: #2c62bb;
  border-bottom-color: #20478b;
  box-shadow: 0 0 0 0.04em #173466;
}

.blue-button:hover {
  background: #4479ce;
  border-bottom-color: #2c62bb;
}