Quick Button Animation Hover Effect with HTML & Pure CSS
In this blog, we have a basic HTML structure with a “Code Hack” link contained within the body. The CSS styles define in this code are use to create a hover effect for the link.
The CSS styles for the body element center the link both horizontally and vertically on the page, and ensures that the background is hidden when the link is hover over.
The styles for the “a” element define the look of the link, including the font, color, and border. The “transition” property is use to smoothly transition the link’s properties when hovered over.
The “a::before” and “a:hover::before” elements create the hover effect by animating the background color of the link to create a smooth transition. The “content”, “position”, “left”, “top”, “width”, “height”, “background”, “z-index”, “transform” and “transition” properties are use to create the animation effect.
The “a:hover” element changes the color of the text to white when the link is hover over.
Overall, this code creates a simple hover effect for a link that changes the background color and text color when hovered over.
Video Tutorial of Button Animation Hover Effect
To see a live demonstration of the Button Animation Hover Effect, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
You might like this:
Button Animation Hover Effect
HTML:
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"> <link rel="stylesheet" href="style.css"> <title>Quick Button Hover Effect</title> </head> <body> <a href="#">Code Hack</a> </body> </html>
The code you’ve provided is a basic HTML document, which consists of three main parts: the head, the body, and the closing HTML tag.
The head of the document contains meta information about the document, such as the character set and the title of the page. It also includes a link to a CSS file called “style.css”, which is used to control the styling of the page.
The body of the document contains the content that is display on the page. In this case, the body contains a single anchor tag, which creates a hyperlink to the “#” address. The text displayed within the anchor tag is “Code Hack”.
The closing HTML tag simply indicates the end of the HTML document.
When this code is render, it will display a single link on the page that says “Code Hack”. The link will not lead anywhere since the href is “#”, it will not change the page when clicked. This would be a good starting point for creating a simple webpage.
CSS:
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; overflow: hidden; } a{ position: relative; text-decoration: none; color: #351435; font-family: sans-serif; font-size: 40px; border: 3px solid #351435; padding: 40px 80px; transition: all 1s; overflow: hidden; } a::before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #351435; z-index: -1; transform: translateY(-100%); transition: all 1s; } a:hover::before{ transform: translateY(0); } a:hover{ color: #fff; }
The CSS code affects the styling of two HTML elements: the <body>
and <a>
tags.
For the <body>
tag, the following properties are applied:
display: flex;
sets the display property of the element to flex, allowing for easy alignment of child elements.justify-content: center;
aligns child elements along the horizontal axis.align-items: center;
aligns child elements along the vertical axis.min-height: 100vh;
sets the minimum height of the element to the full height of the viewport.overflow: hidden;
hides any overflow content that may extend beyond the element’s boundaries.
For the <a>
tag, the following properties are applied:
position: relative;
sets the position of the element to relative, allowing for absolute positioning of child elements.text-decoration: none;
removes the default underline from hyperlinks.color: #351435;
sets the text color to a specific hex value.font-family: sans-serif;
sets the font family to a generic sans-serif font.font-size: 40px;
sets the font size to 40 pixels.border: 3px solid #351435;
adds a 3 pixel border with the same color as the text.padding: 40px 80px;
sets the padding to 40 pixels on the top/bottom and 80 pixels on the left/right.transition: all 1s;
adds a 1 second transition for all properties that change when the element is hover over.overflow: hidden;
hides any overflow content that may extend beyond the element’s boundaries.
Additionally, the ::before
pseudo-element is used to add a background color to the element and a transition effect when the element is hovered over. The :hover
pseudo-class is used to change the text color and animate the ::before
pseudo-element when the element is hovered over.
Summary:
The above code is a simple HTML and CSS script that creates a hover effect for a link. When the link is hover over, the background color changes and the text color also changes to white. The CSS styles center the link on the page, define the font and color of the link, and use the “transition” property to smoothly animate the changes on hover. The “::before” and “:hover::before” elements are use to create the animation effect for the background color, and the “a:hover” element changes the text color when hovered over.