How to Make Gradient Button in HTML?

Last Updated : 14 Oct, 2024

Gradients are smooth transitions between multiple colors, offering a visually appealing and modern way to design elements. In HTML, gradients are typically applied using CSS.

We will discuss the different approaches to making gradient buttons in HTML:

Table of Content

Using Linear Gradients
Using Radial Gradient Button
Using Gradient with Pseudo-elements

Using Linear Gradients

A linear gradient creates a transition between colors along a straight line. The most basic way to create a gradient button is by using the background property with linear-gradient().

Gradient Direction:

to right: Horizontal gradient from left to right.
to left: Horizontal gradient from right to left.
to top: Vertical gradient from bottom to top.
to bottom: Vertical gradient from top to bottom.
to top left: Diagonal gradient from bottom right to top left.
to top right: Diagonal gradient from bottom left to top right.
to bottom left: Diagonal gradient from top right to bottom left.
to bottom right: Diagonal gradient from top left to bottom right.

Example: Below is an example of making a gradient button in html using a linear gradient.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Gradient Heading and Button</title>
    <style>
        /* Flexbox to center content */
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            /* Full viewport height */
            margin: 0;
        }

        /* Gradient heading */
        h1 {
            font-size: 3em;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            color: transparent;
            /* Make the text transparent */
        }

        .gradient-button {
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .gradient-button:hover {
            background: linear-gradient(to right, #feb47b, #ff7e5f);
        }
    </style>
</head>

<body>

    <h1>Gradient Heading</h1>

    <!-- Centered Gradient Button -->
    <button class="gradient-button">Click Me</button>

</body>

</html>

Output:

Using Radial Gradient Button

A radial gradient gives a circular or elliptical color transition, starting from the center (or a specified point) of the button. In this case, radial-gradient() is used to create a circular gradient effect. The colors transition from the center outward, giving the button a dynamic look. The button also has a hover effect that slightly enlarges it.

Example: Below is an example to make a gradient button using radial gradient button.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Radial Gradient Button</title>
    <style>
        .radial-gradient-button {
            background: radial-gradient(circle, #ff7e5f, #feb47b);
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 50px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .radial-gradient-button:hover {
            transform: scale(1.05);
        }
    </style>
</head>

<body>
    <h1>Radial Gradient Button</h1>
    <button class="radial-gradient-button">Click Me</button>

</body>

</html>

Output:

Using Gradient with Pseudo-elements

Another approach is to use pseudo-elements (::before or ::after) to create a gradient effect. This allows you to create more complex designs or add animations. In this case, we use the ::before pseudo-element to create the gradient. The ::before element is initially hidden using transform: scaleX(0), and on hover, it expands to cover the entire button, creating a smooth gradient transition effect.

Example: Below is an example to make gradient button in html with pseudo-elements:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Gradient Button with Pseudo-element</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 30px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            color: transparent;
        }

        .pseudo-gradient-button {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            border: none;
            background: transparent;
            cursor: pointer;
            overflow: hidden;
            z-index: 1;
        }

        .pseudo-gradient-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            z-index: -1;
            transition: transform 0.5s ease;
            transform: scaleX(0);
            transform-origin: left;
        }

        .pseudo-gradient-button:hover::before {
            transform: scaleX(1);
        }
    </style>
</head>

<body>

    <h1>Gradient button with Pseudo-element</h1>
    <button class="pseudo-gradient-button">Hover Me</button>

</body>

</html>