Flat Buttons

Preview:
 



HTML

Code

<a href="" class="btn btn-default btn-lg" data-original-title="" title="">Default button</a>
<a href="" class="btn btn-primary btn-lg" data-original-title="" title="">Primary button</a>
<a href="" class="btn btn-success btn-lg" data-original-title="" title="">Success button</a>


CSS

Code

.btn.btn-lg {
border-radius: 4px;
padding: 0 20px;
height: 44px;
line-height: 44px;
}
.btn {
position: relative;
top: 0;
border: none;
text-decoration:none !important;
padding: 0 15px;
margin: 5px;
height: 30px;
line-height: 30px;
outline: none;
border-radius: 4px;
font-family: "Open Sans", sans-serif;
font-weight: 400;
-webkit-backface-visibility: hidden;
}
.btn-primary {
color: #ffffff;
background-color: #4976a4;
border-color: transparent;
box-shadow: 0 2px 0 #395d82;
}
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-

primary {
color: #ffffff;
background-color: #406e9c;
border-color: transparent;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .open .dropdown-toggle.btn {
color: #ffffff;
background-color: #b0d3f1;
border-color: transparent;
}
.btn.btn-lg {
border-radius: 4px;
padding: 0 20px;
height: 44px;
line-height: 44px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-

primary {
color: #fff;
background-color: #3276b1;
border-color: #285e8e;
}
.btn:hover, .btn:focus {
color: #333;
text-decoration: none;
}
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-

primary {
color: #ffffff;
background-color: #406e9c;
border-color: transparent;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .open .dropdown-toggle.btn {
color: #ffffff;
background-color: #b0d3f1;
border-color: transparent;
}
.btn:active, .btn.active {
top: 2px;
outline: 0;
-webkit-backface-visibility: hidden;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: .075s;
-moz-transition: .075s;
-ms-transition: .075s;
-o-transition: .075s;
transition: .075s;
}
.btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-

primary {
color: #fff;
background-color: #3276b1;
border-color: #285e8e;
}
.btn-default {
color: #ffffff;
background-color: #b9d9f5;
border-color: transparent;
box-shadow: 0 2px 0 #94bfe4;
}
.btn-success {
color: #ffffff;
background-color: #67b96f;
border-color: transparent;
box-shadow: 0 2px 0 #4b9b53;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-

success {
color: #ffffff;
background-color: #5db265;
border-color: transparent;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-

success {
color: #ffffff;
background-color: #5db265;
border-color: transparent;
}

Total comments: 1
RichardKef
Знакомства на Loveawake.Ru
http://m.loveawake.ru - Фотографии Мария, 39 лет, г. Москва Знакомства на Loveawake.Ru
Name *:
Email:
Code *: