онлайн сервис по созданию 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="http://mnogoblog.ru" class="button">Моя кнопочка</a>

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

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

 

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

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


knopkisoc

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