CSS linear-gradient button animation

<html lang="en">
<head>
<title>CSS linear-gradient button animation</title>
<style>
    .gradient-btn {
        display: inline-block;
        padding: 10px 20px;
        margin: 10px;
        border: 2px solid transparent;
        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);
        border-color: #fff;
    }

.btn1:hover {
        transform: rotateY(180deg);
    }

.btn2:hover {
        transform: skewX(20deg);
    }

.btn3:hover {
        transform: scale(1.1);
    }

.btn4:hover {
        transform: rotate(20deg);
    }

.btn5:hover {
        transform: perspective(500px) rotateX(20deg);
    }
</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>

CSS linear-gradient button animation

You may like these posts :

Write Your Comment