Menu Close

How to create custom icon css button hover effect

Jennifer
button-3d

In this blog, we will learn how to create a custom icon when hovering a button in html using css. This hover effect is 3D animated and html based. We can use this button as call to action button anywhere on the website to interact with the users to buy our products.

Create a html file on your computer and add the below codes into this file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to create custom icon css button hover effect</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="section-class">
        <h2>Button Hover Effect</h2>
        <button><span>Hover me!</span></button>
    </div>
</body>
</html>

Then add the below stylesheet into the html file to achieve the custom icon button hover effect.

html, body{
    padding: 100px;
    text-align: center;
    font-family: sans-serif;
}

button {
    border-radius: 5px;
    background-color: #FF7F50;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 25px;
    padding: 16px;
    transition: all 0.5s;
    cursor: pointer;
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
    width: 18%;
    margin: 20px;
}

button{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

button:after {
    content: '»';
    position: absolute;
    opacity: 0;  
    top: 14px;
    right: -20px;
    transition: 0.5s;
}

button:hover{
    padding-right: 30px;
    padding-left:10px;
}

button:hover:after {
    opacity: 1;
    right: 15px;
}
Popular Posts
Total Views: 271
Posted in CSS, HTML, Web Technologies
Tagged , , , ,

You can also read...