Здравствуйте, сегодня будем создавать CSS кнопки для сайта: рассмотрим онлайн сервисы и основы кода CSS кнопки, а также скрипт самого онлайн сервиса по созданию CSS кнопок.
Скачать исходники для статьи можно ниже
1. Онлайн сервисы по созданию CSS кнопок.
В интернете есть очень хорошие онлайн сервисы по созданию CSS кнопок:
– “css-tricks.com/examples/ButtonMaker/”
– “cssbuttongenerator.com/”
и др.
2. Более подробно разберем создание CSS кнопки с помощью онлайн сервиса “css-tricks.com/examples/ButtonMaker/”.
Почему именно этот сервис – а потому что он будет “бессмертным” – так как автор выложил на своем сайте его код, который каждый может скачать и даже установить на свой сайт!
Скачать код данного сервиса можно и с моего сайта – скачать сервис по созданию CSS кнопки.
Здесь:
Справа у нас расположены инструменты для создания кнопки:
- Ползунки – регулируют размер кнопки и закругление углов;
- Top Gradient Color – цвет верхнего градиента;
- Bottom Gradient Color – цвет нижнего градиента;
- Top Border Color – цвет верхней границы кнопки;
- Hover Background Color – цвет кнопки при наведении на нее;
- Text Color – цвет текста;
- Hover Text Color – цвет текста при наведении на кнопку;
- Active Background Color – цвет кнопки при нажатии на нее.
Слева – можно увидеть как будет выглядеть CSS кнопка, а если нажать на нее, то увидим CSS код кнопки, который можно скопировать, по умолчанию он выглядит так:
.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.button:active {
border-top-color: #1b435e;
background: #1b435e;
}
Здесь по моему мнению, все прекрасно видно – что за что отвечает в CSS коде кнопки:
Во-первых, у кнопки есть три состояния:
1. Кнопка в состоянии покоя;
2. Когда на кнопку наведен курсор мыши – за него отвечает класс hover;
3. Когда мы кликаем по кнопке – за него отвечает класс active (данный класс мы почти не видим, однако, если воспользоваться эффектом задержки при переходе по ссылке – то можно насладиться им в полной мере).
И соответственно, для всех этих классов (hover, active) приписываются свои стили оформления цвет фона кнопки (background), цвет текста (color) и др.
Во-вторых, в данном коде видно использование различных свойств:
gradient – отвечает за градиент,
radius – закругление углов кнопки,
shadow – тени,
и т.д.
Продолжаем создавать кнопку – у нас есть CSS свойства – которые мы должны прописать в файле стилей – для сайтов на wordpress – это style.css – чтобы попасть в него заходим в панель управления wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов находим файл – style.css и вставляем код CSS кнопки.
Далее следует создать ссылку с классом buttom (по умолчанию в CSS коде кнопки присутствует именно он) и вставить ее там, где мы хотим видеть данную кнопочку, для примера, создадим ее в сайдбаре – для сайтов на wordpress – панель управления, в левом меню пункт “Внешний вид”, его подпункт “Виджеты”, выбираем виджет с названием “Текст” и перетаскиваем его в сайдбар, а далее прописываем в нем следующее:
<a href="https://mnogoblog.ru" class="button">Моя кнопочка</a>
В итоге у нас получиться следующая кнопочка:
PS: Некоторые темы уже используют класс “button” в своих стилях, поэтому лучше поменять его на что-нибудь более оригинальное, например, добавить к нему цифры – “button777″…