ФОРУМ PS-Studio.Info

  • Страница 1 из 1
  • 1
Форум » Общий форум: Веб-дизайн » Готовые решения » 1000 мелочей » Симпатичные кнопки с информерами (Информативные кнопки на CSS)
Симпатичные кнопки с информерами
Дата: Вс, 20.05.2018, 07:48 Сообщение # 1
ps-studio
Администраторы




Код нашей базовой кнопки:

Код

<button type="button" class="btn">Кнопочка</button>


Для базовой кнопки мы присвоили класс btn, пропишем стили для оформления базовой кнопки:

Код

button {
    outline: 0!important;
    overflow:visible;
    text-transform:none;
    -webkit-appearance:button;
    cursor:pointer;
}

button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}

.btn{
    padding:5px 20px;
    line-height:28px;
    text-decoration:none;
    font-weight:600;
    overflow:hidden;
    position:relative;
    -webkit-transition:all .1s ease-in;
    -moz-transition:all .1s ease-in;
    -ms-transition:all .1s ease-in;
    -o-transition:all .1s ease-in;
    transition:all .1s ease-in;
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 13px;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


Кстати, здесь же, в стилях, я подключил шрифт, используемый на демо-странице:

Код

@import url('//fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic&subset=latin,cyrillic');


Смотрим, что у нас получилась за кнопка:



Получилось не очень, правда? Серая, невзрачная, не реагирующая ни на наведение курсора мыши, ни на нажатие на неё. Ну ничего, это же база. Дальше мы её приведём к нужному виду!
Прикрепления: 1553016.png(51.6 Kb)
профиль www Вверх
Дата: Вс, 20.05.2018, 08:10 Сообщение # 2
ps-studio
Администраторы
Добавим нашей базовой кнопке ещё один класс, btn-default, это будет класс оформления базовой кнопки с минимумом стилей:

Код

<button type="button" class="btn btn-default">Кнопочка</button>


Теперь общие стили для базовой кнопки будут выглядеть так:

Код

button {
    outline: 0!important;
    overflow:visible;
    text-transform:none;
    -webkit-appearance:button;
    cursor:pointer;
}

button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}

.btn.btn-default:active,.btn.btn-default:active:focus,.btn.btn-default:hover{
    border-color:#ccd3d9;
    background:#f7f7f7;
    color:#383838
}
.btn.btn-default:focus{
    border-color:#ccd3d9;
    background:#f7f7f7;
    color:#454545
}
.btn.btn-default:active,.btn.btn-default:active:focus,.btn.btn-default:focus{
    -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
    -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.1)
}

.btn{
    padding:5px 20px;
    line-height:28px;
    text-decoration:none;
    font-weight:600;
    overflow:hidden;
    position:relative;
    -webkit-transition:all .1s ease-in;
    -moz-transition:all .1s ease-in;
    -ms-transition:all .1s ease-in;
    -o-transition:all .1s ease-in;
    transition:all .1s ease-in;
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 13px;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-default {
    color: #454545;
    background-color: #fff;
    border-color: #dbe0e4;
}


Посмотрите теперь, как преобразилась наша базовая кнопка:



Она стала очень симпатичной, современной, реагирует на наведение курсора мыши и на нажатие. Базовое оформление кнопки с минимумом стилей готово.
профиль www Вверх
Дата: Вс, 20.05.2018, 08:12 Сообщение # 3
ps-studio
Администраторы


Чтобы для кнопки сделать базовый(default) информер, нужно добавить ей еще один класс, btn-informer, а содержимое информера заключить в тег span с двойным классом informer informer-default:

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-default">10</span></button>


В нашем случае содержимое информера это цифра 10.

Соответственно, добавляем стили для оформления базового информера:

Код

.btn.btn-informer>.informer{
    position:absolute;
    right:-15px;
    top:-15px;
    width:28px;
    height:28px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    line-height:28px;
    font-size:11px;
    font-weight:600;
    z-index:10
}
.btn.btn-informer>.informer.informer-default{
    border:1px solid #DBE0E4;
    background:#FFF;
    color:#454545;
    -webkit-box-shadow:0 0 0 2px rgba(255,255,255,.3);
    -moz-box-shadow:0 0 0 2px rgba(255,255,255,.3);
    box-shadow:0 0 0 2px rgba(255,255,255,.3)
}

.btn.btn-informer {
    overflow: visible;
}


Полные стили для кнопки теперь такие:

Код

button {
    outline: 0!important;
    overflow:visible;
    text-transform:none;
    -webkit-appearance:button;
    cursor:pointer;
}

button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}

.btn.btn-default:active,.btn.btn-default:active:focus,.btn.btn-default:hover{
    border-color:#ccd3d9;
    background:#f7f7f7;
    color:#383838
}
.btn.btn-default:focus{
    border-color:#ccd3d9;
    background:#f7f7f7;
    color:#454545
}
.btn.btn-default:active,.btn.btn-default:active:focus,.btn.btn-default:focus{
    -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
    -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.1)
}

.btn{
    padding:5px 20px;
    line-height:28px;
    text-decoration:none;
    font-weight:600;
    overflow:hidden;
    position:relative;
    -webkit-transition:all .1s ease-in;
    -moz-transition:all .1s ease-in;
    -ms-transition:all .1s ease-in;
    -o-transition:all .1s ease-in;
    transition:all .1s ease-in;
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    font-size: 13px;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-default {
    color: #454545;
    background-color: #fff;
    border-color: #dbe0e4;
}

.btn.btn-informer>.informer{
    position:absolute;
    right:-15px;
    top:-15px;
    width:28px;
    height:28px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    line-height:28px;
    font-size:11px;
    font-weight:600;
    z-index:10
}
.btn.btn-informer>.informer.informer-default{
    border:1px solid #DBE0E4;
    background:#FFF;
    color:#454545;
    -webkit-box-shadow:0 0 0 2px rgba(255,255,255,.3);
    -moz-box-shadow:0 0 0 2px rgba(255,255,255,.3);
    box-shadow:0 0 0 2px rgba(255,255,255,.3)
}

.btn.btn-informer {
    overflow: visible;
}


Смотрим нашу кнопку с базовым информером.



Если вы хотите, чтобы информер выводился не справа (по умолчанию), а слева, то добавьте для кнопки класс informer-left

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-default informer-left">10</span></button>


Стили для этого класса добавьте в таблицу стилей:

Код

.btn.btn-informer>.informer.informer-left {
    right: auto;
    left: -15px;
}
профиль www Вверх
Дата: Вс, 20.05.2018, 10:02 Сообщение # 4
ps-studio
Администраторы
Форма информера

По умолчанию информер круглый с содержимым внутри него, можно изменить форму информера.

Чтобы сделать информер квадратной формы, добавьте класс informer-square, например:

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-default informer-square">10</span></button>


Стили для класса informer-square:

Код

.btn.btn-informer>.informer.informer-square {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}


Если в информере нужно вывести текст и так, чтобы ширина информера автоматически изменилась в зависимости от длины текста, добавьте класс informer-text,например:

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-default informer-text">Ура!</span></button>


Стили для класса informer-text:

Код

.btn.btn-informer>.informer.informer-text {
    width: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 0 5px;
}


Если нужно уменьшить размер информера, используйте класс informer-sm:

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-default informer-sm">!</span></button>


Стили для класса informer-sm:

Код

.btn.btn-informer>.informer.informer-sm {
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: 700;
    right: -8px;
    top: -8px;
    line-height: 18px;
}


Все перечисленные выше примеры вы можете посмотреть по ссылке ниже.

профиль www Вверх
Дата: Вс, 20.05.2018, 10:21 Сообщение # 5
ps-studio
Администраторы


Изменение цветовой схемы информера достигается добавлением к тегу span определённого класса, отвечающего за то или иное оформление (цветовую схему).

Цветовая схема "primary"

Добавляется класс informer-primary

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-primary">10</span></button>


Код

.btn.btn-informer>.informer.informer-primary {
    border: 1px solid #1f2433;
    background: #292f43;
    color: #FFF;
    -webkit-box-shadow: 0 0 0 2px rgba(41,47,67,.3);
    -moz-box-shadow: 0 0 0 2px rgba(41,47,67,.3);
    box-shadow: 0 0 0 2px rgba(41,47,67,.3);
}


Цветовая схема "success"

Добавляется класс informer-success

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-success">10</span></button>


Код

.btn.btn-informer>.informer.informer-success {
    border: 1px solid #699835;
    background: #76AB3C;
    color: #FFF;
    -webkit-box-shadow: 0 0 0 2px rgba(118,171,60,.3);
    -moz-box-shadow: 0 0 0 2px rgba(118,171,60,.3);
    box-shadow: 0 0 0 2px rgba(118,171,60,.3);
}


Цветовая схема "info"

Добавляется класс informer-info

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-info">10</span></button>


Код

.btn.btn-informer>.informer.informer-info {
    border: 1px solid #3aacd9;
    background: #4FB5DD;
    color: #FFF;
    -webkit-box-shadow: 0 0 0 2px rgba(79,181,221,.3);
    -moz-box-shadow: 0 0 0 2px rgba(79,181,221,.3);
    box-shadow: 0 0 0 2px rgba(79,181,221,.3);
}


Цветовая схема "warning"

Добавляется класс informer-warning

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-warning">10</span></button>


Код

.btn.btn-informer>.informer.informer-warning {
    border: 1px solid #dd8f00;
    background: #F69F00;
    color: #FFF;
    -webkit-box-shadow: 0 0 0 2px rgba(246,159,0,.3);
    -moz-box-shadow: 0 0 0 2px rgba(246,159,0,.3);
    box-shadow: 0 0 0 2px rgba(246,159,0,.3);
}


Цветовая схема "danger"

Добавляется класс informer-danger

Код

<button type="button" class="btn btn-default btn-informer">Кнопочка <span class="informer informer-danger">10</span></button>


Код

.btn.btn-informer>.informer.informer-danger {
    border: 1px solid #ee363a;
    background: #F04E51;
    color: #FFF;
    -webkit-box-shadow: 0 0 0 2px rgba(240,78,81,.3);
    -moz-box-shadow: 0 0 0 2px rgba(240,78,81,.3);
    box-shadow: 0 0 0 2px rgba(240,78,81,.3);
}


профиль www Вверх
Форум » Общий форум: Веб-дизайн » Готовые решения » 1000 мелочей » Симпатичные кнопки с информерами (Информативные кнопки на CSS)
  • Страница 1 из 1
  • 1
Поиск:

Хостинг от uCoz