Personal project button hover effects - help required

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.

Hi, there!

Are you still having problems figuring this out? If so, I would like some more information on what it is you’re trying to do. Could you provide a link or screenshot of the effect?

1 Like

Hi, my apologies, I could have been clearer. The problem is still there. My problem is with the div class=“estimate-button” and ist child a tag. It is styled to look like a glass button. It also has a pseudo-child element, that is supposed to perform a sort of glass reflection/flashing animation when hovered by moving across the button. My problem is with the pseudo-child element. I believe it should be hidden by the overflow property as shown in the code below, only showing when moving across the button, creating the effect. Somehow its still showing though, even outside the button. The full code is below. I’d really appreciate any help :smile:

For some reason the forum doesn’t allow me to paste in the code, but you can find the full code in the following repo, its the index.html and index.css files:

Oh, you want to hide the glowing bar, yes?
image

Currently, you have its position set to absolute. When setting an element’s position to absolute, it is removed from the flow of the page. If you want its display and position relative to its parent, you need to set the position of the parent to relative.

.estimate-button a {
    position: relative;
}

image

If this is what you are trying to do, then you will need to make some adjustments to finalize the product, but was this what you were going for?

Thanks, this is partly what I’m going for, the glowing bar gets hidden with setting its position to relative, but it’s animation, with moving across the button on hover to create the glimmering effect also disappears. i tried setting its z-index higher to make it layer higher but that’s not working… any ideas?

I suppose I need some clarification on what you are going for.

Was it not this?
transition

This is it exactly, and for some reason it doesn’t work for me… the hover effects stopped working when I changed the position of the glowing bar to relative.
It seems like it’s working for you though.

One of the issues you are having right now is that you placed position: relative on the wrong element. You want to place it on the parent container of the ::before, which would be the <a> tag as I demonstrated above.

.estimate-button a {
    position: relative;
}

.estimate-button a::before {
    position: absolute;
}

Thank you for you trying to help. I think I’m doing everything as you suggest. my code is :


.estimate-button a {
  position: relative;
  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 {
  position: absolute;
  content: "";
  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);
}

Still, it doesn’t work as intended. I appreciate your help, but I don’t know if I’m going to make it work :joy: I must be doing something wrong

You are almost there!

When I said this, I meant that the previous styles you had to position the ::before pseudo-element would need to be changed. If you use your DevTools to look at it, you will see this:

image

So now all you need to do is fix the placement off the ::before

Wow ok that makes sense. Thanks very much for helping me out, I’ve adjusted the positioning and it’s working. I really appreciate your help and effort :smile: :smile:

1 Like

I am glad you got it working! Happy to help!