Оформление кнопок Bootstrap

Изменим стандартный класс Boottrap `.btn`

.btn {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}

.btn-primary {
    background: #0099cc;
    color: #ffffff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background: #33a6cc;
}

.btn-primary:active, .btn-primary.active {
    background: #007299;
    box-shadow: none;
}

Контурная кнопка

Первым шагом при создании контурной кнопки является удаление фона. Поскольку мы будем увеличивать ширину границы, вам также необходимо уменьшить отступы - `padding`.

.btn.outline {
    background: none;
    padding: 12px 22px;
}

Увеличиваем толщину границы и изменяем цвет текста

.btn-primary.outline {
    border: 2px solid #0099cc;
    color: #0099cc;
}

Последний штрих - изменения при наведении и нажатии на кнопку

.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
    color: #33a6cc;
    border-color: #33a6cc;
}
.btn-primary.outline:active, .btn-primary.outline.active {
    border-color: #007299;
    color: #007299;
    box-shadow: none;
}

Кнопка с градиентной заливкой

Установим начальный и конечный цвет градиента для всех браузеров

.btn-primary.gradient {
    background: -moz-linear-gradient(top,  #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #33a6cc 50%,#0099cc 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */
}

Осветляем при наведении указателя мыши

.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {
    background: -moz-linear-gradient(top,  #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #66b2cc 50%,#33a6cc 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */
}

Затемняем при клике

.btn-primary.gradient:active, .btn-primary.gradient.active {
    background: -moz-linear-gradient(top,  #267c99 50%, #007299 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #267c99 50%,#007299 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #267c99 50%,#007299 50%); /* IE10+ */
    background: linear-gradient(to bottom,  #267c99 50%,#007299 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */
}

Скругленная кнопка

Тут все просто - задаем радиус скругления углов границы

.btn-lg.round {
    border-radius: 24px;
}

3-D кнопка

Добиться такого эффекта поможет тень

.btn-primary.raised {
    box-shadow: 0 3px 0 0 #007299;
}

При нажатии на кнопку тень удаляем

.btn-primary.raised:active, .btn-primary.raised.active {
    background: #33a6cc;
    box-shadow: none;
    margin-bottom: -3px;
    margin-top: 3px;
}