WTS - Components v2 (Bootstrap)

by Paulo Ávila

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/css/bootstrap-responsive.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
<button class="btn btn-primary wts-gradient" type="button">Details</button>

<br><br>
    
<button class="btn btn-large btn-primary wts-gradient" type="button">Start search</button>

<br><br>

<button class="btn arrow wts-gradient" type="button">I want it!</button>

SCSS

body { padding: 10px; }

$mainColor: #0090cd;
$secondaryColor: #f1e9e1;
$buttonRadius: 6px;
$buttonRadiusLarge: 10px;



$mainColorHover: rgb(3,159,226);
$mainColorActive: rgb(0,109,167);

$secondaryColorHover: rgb(231,81,19);
$secondaryColorActive: rgb(231,81,19);

$wts_mainColorStart: rgb(0,118,180);
$wts_mainColorEnd: rgb(0,171,231);
$wts_mainColorHoverStart: rgb(2,134,203);
$wts_mainColorHoverEnd: rgb(3,186,250);
$wts_mainColorActiveStart: rgb(0,117,179);
$wts_mainColorActiveEnd: rgb(0,99,155);

$wts_secondaryColorStart: rgb(235,224,214);
$wts_secondaryColorEnd: rgb(248,243,237);
$wts_secondaryColorHoverStart: rgb(240,231,224);
$wts_secondaryColorHoverEnd: rgb(253,251,248);
$wts_secondaryColorActiveStart: rgb(212,201,192);
$wts_secondaryColorActiveEnd: rgb(183,175,169);


.btn {
    -webkit-border-radius: $buttonRadius;
    -moz-border-radius: $buttonRadius;
    -ms-border-radius: $buttonRadius;
    -o-border-radius: $buttonRadius;
    border-radius: $buttonRadius
}

.btn-large {
    -webkit-border-radius: $buttonRadiusLarge;
    -moz-border-radius: $buttonRadiusLarge;
    -ms-border-radius: $buttonRadiusLarge;
    -o-border-radius: $buttonRadiusLarge;
    border-radius: $buttonRadiusLarge    
}

.btn { border: none; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); font-size: 13px; font-family: Arial; font-weight: bold; text-shadow: none; }
.btn.arrow { padding-right: 28px; /*background-image: url(stf.png);*/ background-position: right 50%; background-repeat: no-repeat; }

.btn { color: rgb(51,51,51); background-color: $secondaryColor; }
.btn:hover { color: rgb(231,81,19); background-color: $secondaryColorHover; }
.btn:active { color: rgb(231,81,19); background-color: $secondaryColorActive; }

.btn-primary { color: rgb(255,255,255); background-color: $mainColor; }
.btn-primary:hover { color: rgb(204,255,251); background-color: $mainColorHover; }
.btn-primary:active { color: rgb(204,255,251); background-color: $mainColorActive; }


.btn-large {
   ...