Introduction:
In this tutorial, you will learn how to create an elegant skew fill button animation using only HTML and CSS. This button design is perfect for adding a sleek, professional look to your website, and you can customize it to fit your theme and style. By hovering over the button, users will see an animated effect where the background fills the button diagonally, creating a unique user experience.
Things You Will Learn:
By the end of this tutorial, you will learn:
- How to design a simple button using CSS.
- How to implement a skew fill hover animation effect with CSS pseudo-elements.
- How to apply transitions for smooth animation.
- How to position elements on a webpage with absolute positioning.
Video Tutorial:
If you prefer to learn by watching a video tutorial over reading this lengthy blog post you can watch the video tutorial here down below. Also do not forget to subscribe to my YouTube channel where I post tips, tricks and tutorials related to web development regularly.
Project Folder Structure:
Let us explore the project folder structure. The project folder consists of 2 files. The HTML file creates the elements required to build the structure and layout of our project. Next, the CSS file styles the elements that we have created with CSS. The files used are:
- index.html
- style.css
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Skew Fill Button</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="#" class="button">Button</a>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
body {
background-color: #2e3ffd;
}
.button {
position: absolute;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
outline: 2px solid #ffffff;
padding: 30px 60px;
overflow: hidden;
font-family: "Poppins", sans-serif;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
transition: color 1s;
}
.button:hover {
color: #2e3ffd;
}
.button:before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 0;
height: 100%;
background-color: #ffffff;
transform: skew(35deg);
z-index: -1;
transition: width 1s;
}
.button:hover:before {
width: 250%;
}
Conclusion:
You’ve successfully created a visually appealing skew fill button using pure HTML and CSS. This button design can be customized to match your website’s style by changing colors, padding, or the skew angle. Adding hover animations like this one can significantly enhance user engagement and the overall aesthetics of your site.
