Css button linear gradient

50 CSS Gradient Button Examples

An agglomeration of the top free HTML and CSS gradient button code examples. This diverse collection of CSS gradient buttons are each unique in their own way in terms of design and implementation both aesthetically and code wise. Browse through to find a gradient button that you would like to implement in your web development application.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A set of CSS gradient buttons each with its own style. Other than the first, each button has a smooth glow up effect on hover.

Title:

Gradient button with background color change

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A set of beautiful gradient buttons created using pure HTML and CSS. When you hover over the buttons, a smooth linear gradient color shifting animation occurs with the different color palettes of each.

Title:

Pure CSS Button Hover Glow Effect

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A stylish button with a smooth gradient shadow hover effect. It was created using HTML and Pure CSS. When you click on the button, it will animate the background of the button with a multicolor gradient.

Title:

Animated gradient button using pure css

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A CSS gradient button with an infinite animation created using Pug and Stylus for markup. Its animations are shown with keyframes. A beautiful gradient shadow is also given to the button to make it more attractive.

Title:

Animated pastel gradient button

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A card component with a gradient button created using HTML and SCSS. SCSS code is organized with variables and comments. When you hover over the button, it looks cool with a gradient animation.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A set of beautiful, multicolored gradient buttons with different color pallets are created in pure HTML and CSS. Each button has a shadow that looks beautiful. When you hover over the button, it shows smooth animation with a gradient colors.

Title:

Glowing gradient button animation

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

A glowing button with gradients created using pure HTML and CSS. When you hover over the button, it will create an amazing glow effect with a shining shadow to catch user attention.

Title:

Candy Color Button Animation

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An amazing set of buttons created with HTML and CSS. Each button is designed to provide a unique and beautiful animation upon hover.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

An aesthetically pleasing gradient button was created using HTML and SCSS. When hovered, this button smoothly shifts its numerous gradient colors.

Title:

Gradient Button Hover Effects

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Brave, Firefox, Google Chrome, Edge

Code description:

Three beautiful multicolor CSS gradient buttons each with different animation effects. When you hover over the first button, there is a gradient shadow effect. When you hover over the second button the gradient shifts colors. And when you hover over the third button, a circular gradient color-shifting effect occurs. These gradient buttons were created using HTML and SCSS.

Источник

22 CSS Gradient Buttons

A playful set of buttons that utilize CSS gradients for fun colors and animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Gradient Color Button with Hover Glow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Chroma Button

Example demonstrates the ability to use a multi-color box shadow using pseudo elements and a blur filter.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Call us Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Flat Buttons

Flat buttons with smooth hover effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Peach Beach Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Cat Gradient Button Disco

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Colorful Gradient Flex Buttons

Sweet colorful gradient flex buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Animated Gradient Button

Pure CSS call to action button with an animated background.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Animated Rainbow Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Gradient Button Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Gradient Button Shadows

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Gradient Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Gradient Buttons with Background-Color Change

A selection of gradient buttons that change the background-color when hovering. You can change the directon of the background change in the :hover state. Don’t forget to then also change the background-color direction in the button itself.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Gradient Buttons

CSS gradient buttons with Font Awesome icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Gradient Button Animations

Animation buttons with background gradients. One button with a simple gradient shift on hover, and another with an infinite animation on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Gradient Button

Gradient button with subtle animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

Оформление кнопок

Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.

Ширина и высота кнопки

Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).

Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).

Пример 2. Использование padding

Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.

Параметры текста

К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 3 для текста кнопки устанавливается зелёный цвет и моноширинный шрифт с заглавными буквами.

Рамка

Для управления параметрами рамки применяется свойство border и его производные: border-width, border-style и border-color. В примере 4 класс .btn устанавливает основные параметры кнопки, в том числе толщину, стиль и цвет рамки. Для расширения набора кнопок в пример включены дополнительные классы, меняющие цвет рамки и текста. Таким образом, к достаточно добавить класс .btn и класс с нужным цветом, например, .info .

Пример 4. Цветные рамки у кнопки

Здесь используется набор кнопок с цветными рамками для различных ситуаций.

Скругление углов

За скругление уголков у рамок отвечает свойство border-radius, в качестве его значения указываются любые единицы размера из CSS, например, em, rem, пиксели, проценты и др. В примере 5 у кнопок радиус установлен как 0.4em .

Пример 5. Скруглённые уголки у кнопок

Разные значения border-radius дают и различную форму кнопок. В табл. 1 приведён вид кнопок, получаемый в зависимости от радиуса скругления.

Табл. 1. Значения радиуса скругления

Значение border-radius	Описание	Вид кнопки
0.5em	Такое значение устанавливает одинаковый радиус скругления у всех уголков кнопки.	Кнопка
5em	Любое большое значения радиуса, превышающее половину высоты кнопки, превращает кнопку в подобие пилюли.	Кнопка
50%	Процентная запись устанавливает разные значения радиуса по горизонтали и вертикали, поскольку проценты берутся отдельно от ширины и высоты кнопки. В итоге получается овальная кнопка.	Кнопка
0.8em 0 0.8em 0	Четыре значения позволяют установить радиус каждого уголка кнопки независимо. Отсчёт начинается от левого верхнего угла и идёт по часовой стрелке.	Кнопка

Фон

В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent . Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none . В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success .

Пример 6. Использование background-color

Здесь используется набор цветных кнопок для различных ситуаций.

Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.

Пример 7. Сочетание фона и линии

Градиентный фон

Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:

Для горизонтального градиента слева направо добавится ещё один параметр to right:

Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba() . Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.

linear-gradient( rgba(247, 145, 3, 0.2), rgb(247, 145, 3), rgba(247, 145, 3, 0.2) );

В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba() . Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.

Пример 8. Градиентные кнопки

Добавление тени

Как и к любому блоку, к легко добавляется тень через свойство box-shadow. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.

Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset .

В примере 9 приведены несколько кнопок с разными параметрами box-shadow , дающими непохожие друг на друга тени.

Итоги

• Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
• Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
• Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
• Тень к кнопке добавляется через свойство box-shadow.

Источник