Top 5 stylish html, css buttons with gradient background color

<html lang="en">
<head>
<title>Gradient Buttons</title>
<style>
    .gradient-btn {
        display: inline-block;
        padding: 10px 20px;
        margin: 10px;
        border: none;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s;
    }

.btn1 {
        background: linear-gradient(to right, #ff416c, #ff4b2b);
    }

.btn2 {
        background: linear-gradient(to right, #00c6ff, #0072ff);
    }

.btn3 {
        background: linear-gradient(to right, #f12711, #f5af19);
    }

.btn4 {
        background: linear-gradient(to right, #4b6cb7, #182848);
    }

.btn5 {
        background: linear-gradient(to right, #fc4a1a, #f7b733);
    }

.gradient-btn:hover {
        transform: translateY(-3px);
    }

.btn1:hover {
        background: linear-gradient(to right, #ff4b2b, #ff416c);
    }

.btn2:hover {
        background: linear-gradient(to right, #0072ff, #00c6ff);
    }

.btn3:hover {
        background: linear-gradient(to right, #f5af19, #f12711);
    }

.btn4:hover {
        background: linear-gradient(to right, #182848, #4b6cb7);
    }

.btn5:hover {
        background: linear-gradient(to right, #f7b733, #fc4a1a);
    }
</style>
</head>
<body>
    <a class="gradient-btn btn1" href="#">Button 1</a>
    <a class="gradient-btn btn2" href="#">Button 2</a>
    <a class="gradient-btn btn3" href="#">Button 3</a>
    <a class="gradient-btn btn4" href="#">Button 4</a>
    <a class="gradient-btn btn5" href="#">Button 5</a>
</body>
</html>

Top 5 stylish html, css buttons with gradient background color

You may like these posts :

Write Your Comment