онлайн сервис по созданию CSS кнопок

Создаем CSS кнопку на сайте

Здравствуйте, сегодня будем создавать CSS  кнопки для сайта: рассмотрим онлайн сервисы и основы кода CSS кнопки, а также скрипт самого онлайн сервиса по созданию CSS кнопок.

Скачать исходники для статьи можно ниже

1. Онлайн сервисы по созданию CSS кнопок.

В интернете есть очень хорошие онлайн сервисы по созданию CSS кнопок:

“css-tricks.com/examples/ButtonMaker/”

онлайн сервис по созданию CSS кнопок

– “cssbuttongenerator.com/”

онлайн-сервис по созданию кнопок CSS

и др.

2. Более подробно разберем создание CSS кнопки с помощью онлайн сервиса  “css-tricks.com/examples/ButtonMaker/”.

Почему именно этот сервис – а потому что он будет “бессмертным” – так как автор выложил на своем сайте его код, который каждый может скачать и даже установить на свой сайт!

Скачать код данного сервиса можно и с моего сайта – скачать сервис по созданию CSS кнопки.

онлайн сервис по созданию CSS кнопок

Здесь:

Справа у нас расположены инструменты для создания кнопки:

  1. Ползунки – регулируют размер кнопки и закругление углов;
  2. Top Gradient Color – цвет верхнего градиента;
  3. Bottom Gradient Color – цвет нижнего градиента;
  4. Top Border Color – цвет верхней границы кнопки;
  5. Hover Background Color – цвет кнопки при наведении на нее;
  6. Text Color – цвет текста;
  7. Hover Text Color – цвет текста при наведении на кнопку;
  8. 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>

В итоге у нас получиться следующая кнопочка:

создаем CSS кнопку

 

PS: Некоторые темы уже используют класс “button” в своих стилях, поэтому лучше поменять его на что-нибудь более оригинальное, например, добавить к нему цифры – “button777″…

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий