Button Hover Effect with HTML and CSS @rayen-code

Rayen

Enhance your website's user experience with an eye-catching button hover effect. In this tutorial, we'll guide you through the process of creating a stylish button hover effect using only HTML and CSS. This simple yet effective design element can make your buttons more interactive and visually appealing.




Step 1: HTML Structure:

First, let's set up the basic HTML structure. We'll create a container for the button and define the button element.
<!-- -------------------- 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: Only CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button></button>
</body>

</html>

Step 2: Styling with CSS:

Next, we'll add the CSS to style the button and define the hover effect. We'll use basic CSS properties to create a clean and modern look.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    position: relative;
    width: 150px;
    height: 50px;

    border: 2px solid transparent;
    background: black;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;

}

button:hover {
    border: 2px solid black;
    background: white;
    color: black;
}

button::after {
    content: 'Hover Me';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid transparent;
    transition: top 0.3s, left 0.3s;
}

button:hover::after {
    top: 5px;
    left: 5px;
    border: 2px solid black;
}

In this CSS, the hover-button class defines the initial appearance of the button. The ::before and ::after pseudo-elements create additional borders around the button, which will animate on hover. The transition property ensures a smooth animation effect.

With just a few lines of HTML and CSS, you can create a visually appealing button hover effect that enhances the interactivity of your website. This effect is perfect for making your buttons stand out and providing a better user experience.


0 Comments