Button Hover Effect

Preview 1
Preview 2

Nội dung

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Hover Effect</title>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <a href="#"><button class="btn-hover">Button Hover <i class="fal fa-long-arrow-right"></i></button></a>
    </div>
</body>
</html>

CSS

button{
    padding: 15px;
    outline: none;
    border-radius: 20px;
    cursor: pointer;
}

.btn-hover {
    border: none;
    color: white;
    background-color: #1e1e1e;
    text-transform: uppercase;
    transition: padding 0.2s;
    text-align: center;
    position: relative;
}
    
.btn-hover:hover {
    padding-right: 4rem;
	transition: 0.25s;
}
    
.btn-hover i {
    transition: 0.25s;
    opacity: 0;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
}
    
.btn-hover:hover i {
    transform: translateY(-50%);
    opacity: 1;
}