пробный

генератор кнопок

Генератор кнопок CSS ...

Статьи о блогах ОТ ЙЁЖИ ЙЕЖОВА

Вернуться к статье про генератор

.. ....

Взять CSS

Цвет градиента для верхней части кнопки

Цвет градиента для нижней части кнопки

Цвет верхней границы обводки

Цвет фона кнопки при касании курсором (hover)

Цвет текста

Цвет текста при касании курсором (hover)

Цвет фона кнопки при нажатии (active)

Этот online-генератор красивых кнопок позволяет создать, оформить и настроить кнопку любой формы и получить css-код для неё.

Пример html-кода для кнопки:

.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;
   }