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

Создавайте красивые кнопки CSS визуально — заполняйте, граница, радиус, тень и зависание — а затем копируйте CSS.

How to use CSS Button Generator

1. Установите текст кнопки, накладку, размер шрифта и вес, а также цвет текста.
2. Выберите твердое или двухступенчатое градиентное наполнение и переключите границу и тень по мере необходимости.
3. Выберите пограничный радиус и эффект наведения (подъем, затемнение или свечение) и посмотрите предварительный просмотр в прямом эфире.
4. Нажмите Copy CSS, чтобы скопировать правила .btn и .btn:hover в таблицу стилей.

Что такое имя?

FAQ

Показывает ли предварительный просмотр реальный эффект зависания?

Да. Сгенерированное правило наведения вводится в виде масштабируемого стиля, который нацелен только на кнопку предварительного просмотра, поэтому наведение на нее показывает, что именно будет делать скопированный блок .btn:hover.

Можно сделать градиентную кнопку?

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

Related tools

• Scrollbar Styler
• Box Shadow Generator
• CSS Gradient Generator
• Border Radius Generator