Инструменты
инструменты позволяют наблюдать за динамикой развития ваших сайтов

Обновленные инструменты, с блэкджеком и шлюхами :)

  • полностью обновленный внешний вид
  • обновленные алгоритмы работы
  • и нахаляву
1. настраиваем нашу кнопочку 2. копируем код который получился
Переключится на настройку кнопки при наведении (:hover)

Настройки текста кнопки

em


Фон

1 цвет Градиент
°
%
%
%
%

Рамка



Трансформация

°
°
°
°

Анимация

s

Инструкция к генератору кнопок

Для создания css3 кода красивой кнопки для сайта выберите из меню предложенного выше соответствующие пункты настроек. В меню "Настройки текста кнопки" можно настроить стили для текста, выбрав его шрифт, цвет, тень, стиль, размер;
В меню "Фон" устанавливаем устанавливаем цвет фона, если необходимо одноцветную кнопку без градиента то снимаем галочку с градиента нажав на 1 цвет.
Чтобы отредактировать градиент состоящий из 2 цветов, выбираем его цвет в указанных полях, выбираем стиль градиента, линейный или радиальный, при радиальном градиенте цвета распространяются с центра кнопки. Расположение цветов градиента редактируем поворотом устанавливая угол градиента. Отступ внутренний (padding) - можно установить общий или отдельно каждую сторону нажав на крестик с правой стороны от ползунка в поле отступ.
В меню "рамка" настраиваем стили для обводки кнопки где можно установить;
Радиус;
Толщину;
Стиль;
Цвет - общий или конкретной стороны;
Тень;
Цвет тени;
Настройки тени:
Смещение по оси (х);
Смещение по оси (у);
Размытие.
В меню "Трансформация" - отметив галочки напротив нужного трансформирования, настраиваем:
Поворот;
Наклон;
Наклон по горизонтали;
Наклон по вертикали;
Масштабирование;
Увеличение по осям х и у.
В меню "Анимация" - настраиваем:
Для чего использовать анимацию;
Время;
Стиль.
Для настройки эффекта кнопки при наведении необходимо отметить чекбокс в самом верху формы настройки и установить те параметры которые интересуют при наведении курсора мыши на кнопку.
Можно установить изменение текста, фона, рамки, анимацию и трансформацию.

HTML код для вывода кнопки
<a href="#" class="button">Текст на кнопке</a>
CSS3 стиль кнопки
.button {
-moz-border-radius: 25px;
-moz-box-shadow: #4481E9 0 0 10px;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-border-radius: 25px;
-webkit-box-shadow: #4481E9 0 0 10px;
-webkit-transition: all 0.5s ease;
background-color: #63A6F2;
background-image: -moz-linear-gradient(90deg, #63A6F2, #4481E9);
background-image: -ms-linear-gradient(90deg, #63A6F2, #4481E9);
background-image: -o-linear-gradient(90deg, #63A6F2, #4481E9);
background-image: -webkit-linear-gradient(90deg, #63A6F2, #4481E9);
background-image: linear-gradient(90deg, #63A6F2, #4481E9);
border-radius: 25px;
border: 2px solid #4a5032;
box-shadow: #4481E9 0 0 10px;
color: #ffffff;
display: inline-block;
font-size: 4em;
margin: auto;
padding: 15px;
text-decoration: none;
text-shadow: #000000 5px 5px 15px;
transition: all 0.5s ease;
}
CSS3 стиль при наведении на кнопку (:hover)
.button:hover {
padding: 15px;
}
CSS3 стиль при нажатии на кнопку (:active)
.button:active {
color: #ffffff;
position: relative;
top: 1px;
}