Онлайн редактор CSS3 кнопок для сайта.


Теперь стало создавать легко CSS3 кнопки с помощью онлайн генератора разработанного для облегчения написания CSS3 стилей в реальном времени. Вам осталось всего лишь выбрать и настроить необходимые параметры скопировать исходный код и вставить на свой сайт.

Онлайн редактор кнопок

Внешний вид и код Настройки

Пример


Понравился редактор? Предложите друзьям!

CSS3 настройки кнопки


При активации чекбокса редактор переключится на настройки кнопки при наведении (:hover)

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

em

Фон

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

Рамка


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

°
°
°
°

Анимация

s

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

Для создания css3 кода красивой кнопки для сайта выберите из меню предложенного выше соответствующие пункты настроек.

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

Для настройки эффекта кнопки при наведении необходимо отметить чекбокс в самом верху формы настройки и установить те параметры которые интересуют при наведении курсора мыши на кнопку.

Можно установить изменение текста, фона, рамки, анимацию и трансформацию.

При редактировании это кнопка создавалось автоматически при нажатии Вы попадете на главную страницу сайта

Южный

CSS3 Код

Для добавления стиля кнопки на сайт скопировать весь css3 код ниже и вставить между тегами <style></style>

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

HTML код для вывода кнопки

Для отображения кнопки на сайте скопируйте код ниже и вставить между тегами <body></body>

<a href="#" class="button">Южный</a>

Онлайн редактор HTML5 CSS3 и JavaScript кода.
Небольшая инструкция к редактору!
Для просмотра результата вам необходимо вставить в соответствующие поля код, который вы хотите протестировать. Результат выводится автоматичесски в правом окне.
Разрешено подключать внешние скрипты, для тестирования своего кода для сайта. Для тестирования с своими стилями и javascrip подключите их как у себя на сайте в поле HTML5.
Возможно редактирование CSS3 и HTML5 с автоматичесским просмотром результата.
Просто начинайте вводить код и увидите результат!

Онлайн редактор HTML5 CSS3 и JavaScript кода

Редактор Кнопки с установкой изображения

Вы можете отредактировать изображение кнопки, которую вы видите или создать собственную. Вам достаточно захватить курсором мышки ползунок и подвигать его. Кнопка будет менять свой вид у вас на глазах. Вставляйте на кнопку изображения и текст. Вы сможете создать кнопку самостоятельно и установить себе на сайт!