Animated Fill Button Using HTML & Pure CSS
Hello Readers!, This code creates an animated button using HTML, CSS and some basic animation techniques. The HTML code creates a basic webpage structure with a head section that includes the title of the webpage, and the link to the CSS file. In the body section, an anchor tag with the text “Code Hack” is use to create the button.
The CSS code is use to style the button and create the animation. The body of the webpage is use to display as flex, with the items aligned in the center, and a minimum height of 100vh. This is to ensure that the button is always in the center of the screen, regardless of the screen size. The background color is use to #222, and the overflow is use to hidden.
Anchor Tag:
The anchor tag is style with a text-decoration of none, and a white color for the text. The font family is use to Verdana, Geneva, Tahoma, sans-serif, with a font size of 40px. The border is use to 3px solid white, with a border-radius of 5px, and padding of 40px 80px. The position is use to relative, and the overflow is use to hidden.
Pseudo-Element:
The ::before pseudo-element is use to create the animation effect. The content is use to an empty string, and the position is use to absolute. The top and left properties are use to 0, and the background color is use to #f72585. The width is use to 120px, and the height is use to 100%. The z-index is use to -1, and the transform property is use to skew the element by -15deg. The animation property is use to moving, and it runs for 1.2s in a linear infinite loop. The transition property is use to all 0.5s, which causes the animation to be smooth.
@keyframes:
The @keyframes moving is use to define the animation. The animation starts by moving the element from -120px to the left, and ends by moving it to 100% to the right.
Pseudo-Class:
The :hover pseudo-class is use to change the appearance of the button when the user hovers over it. The ::before element’s width is use to 100%, and the transform is use to skew(0deg), which removes the skew effect. The animation is use to none, which stops the animation when the user hovers over the button.
Video Tutorial of Animated Fill Button
To see a live demonstration of the Animated Fill Button, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Steps to Build A Animated Fill Button
HTML Part:
Create a new file with the name “index.html
” and add the provide code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <a href="#">Code Hack</a> </body> </html>
The body section of this HTML code is relatively simple, it only includes an anchor tag with the text “Code Hack” which will serve as our button. But it plays an important role in the webpage as it is used to structure the webpage and holds all the content that you want to display on the webpage, in this case, the anchor tag with the text “Code Hack” as our button.
The body section is also where we can add more elements like images, text, forms, and other HTML tags to create a more interactive webpage. But in this case, it only includes one element, the button.
It is also worth noting that even though the body section is simple in this code, it can be customized and styled using CSS to create a unique and visually appealing webpage.
In summary, the body section of this code serves as the main container for the webpage’s content and the anchor tag serves as the button which will be styled and animated using CSS.
CSS Part:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #222; overflow: hidden; } a{ text-decoration: none; color: #fff; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 40px; border: 3px solid #fff; border-radius: 5px; padding: 40px 80px; position: relative; overflow: hidden; } a::before{ content: ''; position: absolute; top: 0; left: 0; background: #f72585; width: 120px; height: 100%; z-index: -1; transform: skew(-15deg); animation: moving 1.2s linear infinite; transition: all 0.5s; } @keyframes moving{ from{ left: -120px; } to{ left: 100%; } } a:hover::before{ width: 100%; transform: skew(0deg); animation: none; }
One specific CSS property in this code is the “display” property of the body. This property is set to “flex”, which allows the body to arrange its child elements in a row or a column. The “justify-content” property is set to “center”, which aligns the items along the horizontal axis (horizontally center). The “align-items” property is also set to “center”, which aligns the items along the vertical axis (vertically center). This combination of properties ensures that the button is always centered on the screen, regardless of the screen size.
Summary:
The code creates an animated button using HTML, CSS, and animation techniques. The HTML creates a basic webpage structure with a button created using an anchor tag. The CSS is use to style the button and create the animation, with the button always being in the center of the screen. The ::before pseudo-element is use to create the animation effect, with a linear infinite loop moving the element from left to right. The :hover pseudo-class is use to change the appearance of the button when the user hovers over it, and stops the animation.