Minima Orange

Minima labs launch button

by James Doyle

HTML

<button class="button" role="button">
   Launch Site
</button>

CSS

button {
    margin: 20px;
    width: 200px;
    height: 45px;
}
.button {
   cursor: pointer;
   border: 1px solid #ed6400;
   border-radius: 3px;
   font: bold 11px Sans-Serif;
   padding: 6px 10px;
   white-space: nowrap;
   vertical-align: middle;
   color: #fff;
   background: -webkit-linear-gradient(top, #ed8a00, #ed6400);
   background:    -moz-linear-gradient(top, #ed8a00, #ed6400);
   background:     -ms-linear-gradient(top, #ed8a00, #ed6400);
   background:      -o-linear-gradient(top, #ed8a00, #ed6400);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:hover, .button:focus {
   color: #fff;
   border-color: #ed6400;
   background: -webkit-linear-gradient(top, #FFA21F, #FF7C1F);
   background:    -moz-linear-gradient(top, #FFA21F, #FF7C1F);
   background:     -ms-linear-gradient(top, #FFA21F, #FF7C1F);
   background:      -o-linear-gradient(top, #FFA21F, #FF7C1F);
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
   border-bottom-color: #ff990a;
   border-top-color: #dd5d00;
   -webkit-box-shadow: inset 0 1px 2px #e18300;
   -moz-box-shadow:    inset 0 1px 2px #e18300;
   box-shadow:         inset 0 1px 2px #e18300;
   background: -webkit-linear-gradient(top, #ed6400, #ed8a00);
   background:    -moz-linear-gradient(top, #ed6400, #ed8a00);
   background:     -ms-linear-gradient(top, #ed6400, #ed8a00);
   background:      -o-linear-gradient(top, #ed6400, #ed8a00);
}

JavaScript

// #ed8a00 #ed6400