Question 318309 in Html Question posted in
Some basic documentation can be found here.

Html – How to create a hover effect that changes background color and looks rounded

I’m trying to create a hover effect on a text (p) HTML element. I want the background color of the text element to change, and also, to look oval-shaped. See picture below of what I am trying to achieve. I can’t figure out how to get the oval shape – when I add border radius, it rounds the corners, but not the left and right sides.

Desired effect:

enter image description here

Here is the closest I’ve gotten:

border: 1px solid transparent;
border-radius: 10px;

I know I need to add padding on the left…but just trying to figure out the oval shape first.

enter image description here

Thanks so much in advance for any help.

Tags:

2

Answers


  1. 0

    What I have found to always work is to set a border radius that is higher than the total height of the button, eg: 100px or even 200px to be safe.

    https://codepen.io/Luke-Johns-lukeybytes/pen/WNmGXpW

    .rounded {
  background: black;
  border-radius: 100px;
  color: white;
  padding: 2rem;
}
    Login or Signup to reply.
  2. 0

    well did you tried

    p:hover {
  background-color: lightblue;
  border-radius: 50% / 10px;
}

    hope this will help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search