Button Mirror Reflection Using HTML & Pure CSS

Hello Reader!, This code creates a simple webpage with a button that has a mirror reflection effect when hovered over. The webpage is written in HTML and CSS.

The HTML sets up the basic structure of the webpage and includes a link to a CSS stylesheet. The link within the body of the HTML serves as the button for the mirror reflection effect.

The CSS styles the webpage and the button to create the mirror reflection effect. It sets the display, text-decoration, color, font, border, padding, and transition properties of the button. The hover effect is create by setting the background color of the button to a different color and using the ::before pseudo-element to create the reflection. The transform property is used to rotate and translate the reflection to create the mirror effect.

Video Tutorial of Button Mirror Reflection

To see a live demonstration of the Button Mirror Reflection, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.

Button Mirror Reflection

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">
    <link rel="stylesheet" href="style.css">
    <title>Botton Mirror Reflection</title>
</head>

<body>
    <a href="#">Code Hack</a>
</body>

</html>

This code is a basic HTML document that sets up the structure for a website.

The first line, <!DOCTYPE html>, is a declaration that this is an HTML document.

The <html> tag that follows indicates the start of the HTML document and the “lang” attribute specifies that the language of the document is English.

The <head> tag contains information about the document that is not visible on the website, such as the title of the page, which is “Botton Mirror Reflection” and is set using the <title> tag. It also contains a link to a stylesheet named “style.css” which defines the look and layout of the website.

The <body> tag contains the actual content of the website. In this case, it contains an anchor tag <a> which creates a hyperlink to a website named “Code Hack”.

The </html> tag at the end of the code indicates the end of the HTML document.

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 {
    position: relative;
    text-decoration: none;
    color: #fff;
    font-family: sans-serif;
    font-size: 40px;
    border: 3px solid #fff;
    padding: 40px 80px;
    transition: all 0.3s;
    overflow: hidden;
    text-transform: capitalize;
}

a:hover {
    background: #F44336;
}

a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    transform: translateX(-100%) rotate(45deg);
    background: #fff;
    transition: all 0.3s;
}

a:hover::before {
    transform: translateX(100%) rotate(45deg);
}

This code is a simple webpage that displays a button with a mirror reflection effect when hovered over. The webpage is written in HTML and CSS. The HTML sets up the basic structure of the webpage and includes a link to the CSS stylesheet. The CSS styles the webpage and the button, using properties such as display, text-decoration, color, font, border, padding, and transition, as well as the ::before pseudo-element to create the reflection effect. The hover effect is create by changing the background color of the button and using the transform property to rotate and translate the reflection.

This CSS code is styling a webpage.

The first block of CSS styles the <body> tag.

The display: flex property sets the display property of the <body> element to flex, which is a layout mode that aligns elements in a row or a column.
The justify-content: center property aligns the content of the <body> element along the horizontal axis.
The align-items: center property aligns the content of the <body> element along the vertical axis.
The min-height: 100vh property sets the minimum height of the <body> element to be the full height of the viewport.
The background: #222 property sets the background color of the <body> element to be a dark gray color.
The overflow: hidden property sets the overflow property of the <body> element to hidden, which hides any content that overflows the <body> element.

The second block of CSS styles the <a> tag.

The position: relative property sets the position property of the <a> element to relative, which positions the <a> element relative to its default position.
The text-decoration: none property removes the underline from the <a> element.
The color: #fff property sets the text color of the <a> element to be white.
The font-family: sans-serif property sets the font family of the <a> element to be sans-serif.
The font-size: 40px property sets the font size of the <a> element to be 40 pixels.
The border: 3px solid #fff property sets the border of the <a> element to be 3 pixels thick and white in color.
The padding: 40px 80px property sets the padding of the <a> element to be 40 pixels on the top and bottom and 80 pixels on the left and right.
The transition: all 0.3s property adds a transition effect to all properties of the <a> element when they change, with a duration of 0.3 seconds.
The overflow: hidden property sets the overflow property of the <a> element to hidden, which hides any content that overflows the <a> element.
The text-transform: capitalize property changes the text inside the <a> element to be capitalized.

The third block of CSS styles the <a> tag when it is hovered over.

The background: #F44336 property sets the background color of the <a> element to be red when it is hovered over.

The fourth block of CSS styles the ::before pseudo-element of the <a> tag.

The content: '' property sets the content of the ::before pseudo-element to be empty.
The position: absolute property sets the position property of the ::before pseudo-element to be absolute, which positions the pseudo-element relative to the nearest positioned ancestor element.
The top: 0 property sets the top position of the ::before pseudo-element to be 0 pixels.
The left: 0 property sets the left position of the ::before pseudo-element to be 0 pixels.
The width: 100% property sets the width of the ::before pseudo-element to be 100% of the width of the <a> element.
The height: 50px property sets the height of the ::before pseudo-element to be 50 pixels.
The transform: translateX(-100%) rotate(45deg) property moves the ::before pseudo-element 100% of the width of the <a> element to the left and rotates it 45 degrees.
The background: #fff property sets the background color of the ::before pseudo-element to be white.
The transition: all 0.3s property adds a transition effect to all properties of the ::before pseudo-element when they change, with a duration of 0.3 seconds.

The last block of CSS styles the ::before pseudo-element of the <a> tag when the <a> tag is hovered over.

The transform: translateX(100%) rotate(45deg) property moves the ::before pseudo-element 100% of the width of the <a> element to the right and rotates it 45 degrees.

Summary:

Overall, this CSS code creates a webpage with a dark gray background, a white, capitalized link with a white border, which when hovered over, changes its background color to red, and creates a white, diagonal stripe that slides in from the left and when hovered over, slides out from the right. This creates a visually appealing and interactive experience for users visiting the website.