Start learning

Hover Effect Buttons

You can freely copy the code or you can use our free live HTML editor to modify the code according to your specific needs.


Hover Effect Buttons Example 1

<button class="btn btn-1">Button 1</button>
        <button class="btn btn-2">Button 2</button>
        <button class="btn btn-3">Button 3</button>
        <button class="btn btn-4">Button 4</button>
        <button class="btn btn-5">Button 5</button>

.btn {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}
/* Button 1 */
.btn-1 {
    background-color: #3498db;
    color: #fff;
    border: 2px solid #2980b9;
    box-shadow: 0 0 20px rgba(0, 0, 0, 4);
}
/* Button 2 Hover Effect */
.btn-1:hover {
    transform: rotate(-5deg);
    background-color:lightblue;
    color:black;
}

/* Button 2 */
.btn-2 {
    background-color: #2ecc71;
    color: #fff;
    transform-origin: left;
    transition: transform 0.2s ease-in-out, background-color 0.3s ease-in-out;
}

/* Button 2 Hover Effect */
.btn-2:hover {
    transform: rotate(5deg);
    background-color: #27ae60;
}

.btn-3 {
    background-color: #e74c3c;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.btn-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.btn-3:hover::before {
    transform: translateX(0);
}

/* Button 4 */
.btn-4 {
    background-color: #f39c12;
    color: #fff;
    overflow: hidden;
}

/* Button 4 - Updated Style */
.btn-4 {
    background-color: #e67e22;
    color: #fff;
    border: 2px solid #d35400;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.btn-4:hover {
    transform: scale(1.1);
}

/* Button 5 */
.btn-5 {
    background-color: #9b59b6;
    color: #fff;
}

.btn-5:hover {
    transform: rotate(360deg);
}

Preview