Create a Stylish Slide-in Button with Hover Effect
In this post, we’ll create a sleek, animated button that reveals a slide effect on hover. This button is perfect for any modern website and is fully responsive for mobile devices. Copy the code below to use it directly on your site.
HTML and CSS Code
Simply copy the code below and add it to your website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-in Button Example</title>
<style>
/* Main container styling to center the button */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Slide-in Button Styling */
.slide-button {
position: relative;
padding: 10px 20px;
font-size: 16px;
color: #3498db;
background-color: transparent;
border: 2px solid #3498db;
border-radius: 5px;
cursor: pointer;
overflow: hidden;
transition: color 0.3s ease;
z-index: 1;
}
/* Slide effect on hover */
.slide-button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #3498db;
z-index: -1;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
/* Hover effect for slide and text color */
.slide-button:hover::before {
transform: translateX(0);
}
.slide-button:hover {
color: #fff;
}
/* Responsive design for smaller screens */
@media (max-width: 600px) {
.slide-button {
font-size: 14px;
padding: 8px 16px;
}
}
</style>
</head>
<body>
<!-- Centered button inside container -->
<div class="container">
<button class="slide-button">Slide Button</button>
</div>
</body>
</html>
How It Works
Here’s how each part of the code contributes to the effect:
- Container: Centers the button on the screen using flex properties.
- Button Styling: The button is styled with a transparent background, a colored border, and a hover effect that changes the text color.
- Slide Effect: The
::beforepseudo-element creates a slide that animates on hover, providing a dynamic, modern look. - Responsive Design: A media query makes the button responsive by adjusting padding and font size on smaller screens.
Copy, Paste, and Use!
Copy the code above, paste it into your website's HTML file, and enjoy a stylish slide-in button!