Hey guys, I’m making a small portfolio project, a small business page of a hypothetical Window Cleaning Company. I thought that it’d be cool to add a ‘reflection’ effect to a button on the page, activated by hovering. I’ll admit I got some ideas on how to do it from YouTube. I have a problem however, after making the code work pretty well, my final step is to make overflow hidden to give the button the said effect. Sadly it doesn’t seem to be working right, and the whole moving pseudo-element (which is supposed to be mostly hidden) doesn’t want to dissapear. Could someone please have a look at my code, particularly at the ‘estimate-button’, class element it’s ‘a’ tag child and their css properties to give me some advice on what am I doing wrong? Any help would be HUGELY appreciated. PS: to view full code look here: GitHub - nhapunik/Crystal-Clear-Window-Cleaning
<body>
<header>
<h1>Crystal Clear Window Cleaning</h1>
</header>
<div class="estimate-button"><a href="">Get a free estimate now!</a></div>
<body>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Atkinson Hyperlegible", sans-serif;
}
body {
height: 100vh;
overflow: hidden;
background-image: linear-gradient(
to top right,
rgb(103, 250, 252),
rgb(147, 176, 188)
);
}
header {
margin-top: 1rem;
text-align: center;
}
h1 {
color: rgb(255, 249, 222);
font-weight: 500;
padding-bottom: 1.2rem;
border-bottom: solid 1px rgb(255, 249, 222);
text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
}
.estimate-button a {
display: block;
padding: 0.8rem 1.2rem;
margin: 2rem auto;
text-align: center;
font-size: 1.2rem;
border-radius: 4px;
width: 300px;
text-decoration: none;
color: rgb(255, 249, 222);
overflow: hidden;
}
.estimate-button a::before {
content: '';
position: absolute;
height: 100px;
width: 20px;
background: #f3f3f3;
box-shadow: 0 0 10px #fff;
filter: blur(1px);
opacity: 0.9;
top: 50px;
left: 39%;
transition: 0.7s;
transform: rotate(-20deg) translateX(-60px);
}
.estimate-button a:hover::before {
transform: rotate(-20deg) translate(280px, 110px);
}
main {
border-radius: 6px;
background-image: linear-gradient(
to bottom left,
rgba(255, 255, 255, 0.3),
rgba(199, 199, 199, 0.8)
);
max-width: 92%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-content: flex-start;
backdrop-filter: blur(10px);
}
main,
.estimate-button a {
background-image: linear-gradient(
to bottom left,
rgba(255, 255, 255, 0.3),
rgba(199, 199, 199, 0.8)
);
box-shadow: 0.3rem 0.3rem 0.3rem rgba(125, 135, 134, 0.534);
border-top: 1px solid white;
border-left: 1px solid white;
border-bottom: 1px solid rgb(199, 199, 199);
border-right: 1px solid rgb(199, 199, 199);
text-decoration: none;
}
PS. the page isn’t finished so I know there is a lot to fix except that single button issue.