0

I am trying to make a button with a hover effect and ::after pseudo class is involved.

The ::after pseudo-class covers 100% of the button's height and width, even more just to be sure; then when :hover, the ::after element's width will shrink to 0.

My problem is that I can't precisely size the ::after element, so I simply added overflow: hidden; to the button so that it will cut out the overflowing parts of the ::after pseudo-element. But it cropped a little too much, leaving one pixel between the border and the ::after pseudo-element covering the button.

.btn { font-family: inherit; background-color: transparent; text-decoration: none; padding: 1rem 1.5rem; font-size: 2.3rem; color: #fff; border: solid 3px #EF9C43; width: 50%; border-radius: 100rem; text-transform: uppercase; font-weight: 400; transition: color 0.3s, transform 0.3s, box-shadow 0.3s; position: relative; box-shadow: 1rem 1rem 4rem rgba(31, 31, 31, 0.5); z-index: 5; backface-visibility: hidden; overflow: hidden; } .btn::after { content: ""; position: absolute; top: -2px; left: -2px; background-color: #EF9C43; width: 110%; height: 110%; z-index: -1; transition: width 0.3s; } .btn:hover { font-weight: 600; color: #1f1f1f; transform: translateY(-0.3rem); box-shadow: 1rem 1.5rem 2rem rgba(31, 31, 31, 0.6); } .btn:active { transform: translateY(-0.1rem); box-shadow: 1rem 1.25rem 2.5rem rgba(31, 31, 31, 0.5); } .btn:hover::after { width: 0; }
<button class="btn btn--orange">Hire our services</button>

Here is the codepen of my case: https://codepen.io/CoolBoiDave/pen/bGLdwxE

Any help would be appreciated! (PS: sorry for bad english)

Improve this question
4
  • 2
    Offtopic: Hover your button slowly from the bottom... welcome to bad UI design :) Commented May 4, 2022 at 10:04
  • @RokoC.Buljan ah I did not notice that! Thank you for the info, I will fix it :) Commented May 4, 2022 at 10:06
  • I brought the code from your linked Codepen demo into the question, though as Stack Overflow doesn't have a compiler for SCSS I did have to compile that SCSS to plain CSS; this means your question may attract answers that need to be converted back to SCSS (sorry). Commented May 4, 2022 at 10:13
  • @DavidThomas All good. Thanks for helping me with the post! Commented May 4, 2022 at 10:17

1 Answer 1

Reset to default
2

I don't know why would you use an ::after pseudo element when all you need is to
transition a background-image.
Also, you could use an inset box-shadow instead of border.

.btn { background-color: transparent; padding: 1rem 1.5rem; font: 400 2.3rem sans-serif; text-transform: uppercase; color: #fff; border: 0; border-radius: 4rem; font-weight: 400; transition: color .3s, background-position .3s, box-shadow .3s; box-shadow: 0 1rem 4rem rgba(0,0,0,0.3), inset 0 0 0 3px #EF9C43; background-image: linear-gradient(90deg, rgba(255,145,0,1) 50%, rgba(0,0,0,0) 50%); background-size: 200%; } .btn:hover, .btn:active { background-position: 100%; color: #1f1f1f; box-shadow: 0 1.5rem 2rem rgba(0,0,0,0.3), inset 0 0 0 3px #EF9C43; }
<button class="btn btn--orange">Hire our services</button>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

sorry, but the ::after pseudo class method was the first thing I thought about when making this button. Thank you for the alternative solution!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.