Hover Effects for button In HTML CSS

UDIT KHODE May 30, 2024
Hover Effects Examples

Example 1: Color Change with Transition

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Effect</title>
    <style>
        .btn-example1 {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #3498db;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            cursor: pointer;
        }

        .btn-example1:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <button class="btn-example1">Hover me</button>
</body>
</html>

Output



Example 2: Scale Up

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Effect</title>
    <style>
        .btn-example2 {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: #fff;
            background-color: #e74c3c;
            border: none;
            border-radius: 5px;
            transition: transform 0.3s ease;
            cursor: pointer;
        }

        .btn-example2:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <button class="btn-example2">Hover me</button>
</body>
</html>

Output



Example 3: Rotate Effect

<style>
    .btn-example3 {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #8e44ad;
        border: none;
        border-radius: 5px;
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    .btn-example3:hover {
        transform: rotate(15deg);
    }
</style>
<button class="btn-example3">Hover me</button>

Output



Example 4: Opacity Effect

<style>
    .btn-example4 {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #2ecc71;
        border: none;
        border-radius: 5px;
        transition: opacity 0.3s ease;
        cursor: pointer;
    }

    .btn-example4:hover {
        opacity: 0.7;
    }
</style>
<button class="btn-example4">Hover me</button>

Output



Example 5: Border Color Change

<style>
    .btn-example5 {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #f39c12;
        border: 2px solid #f39c12;
        border-radius: 5px;
        transition: border-color 0.3s ease;
        cursor: pointer;
    }

    .btn-example5:hover {
        border-color: #d35400;
    }
</style>
<button class="btn-example5">Hover me</button>

Output



Example 6: Text Color Change

<style>
    .btn-example6 {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #34495e;
        border: none;
        border-radius: 5px;
        transition: color 0.3s ease;
        cursor: pointer;
    }

    .btn-example6:hover {
        color: #ecf0f1;
    }
</style>
<button class="btn-example6">Hover me</button>

Output



Tags:

Post a Comment

0 Comments