CODEWITHSUNDEEP
htmlcss
user8388693
user8388693

Reputation:

Using CSS, how do you add a rounded grey background to an element when the user hovers over it

I'm trying to add a grey, rounded background to an element when the user hovers over it. Ideally like the example. Before: before hover image

after: after hover image

/* this is my current code (css) */
a:hover {
background-color: gray;
border-radius: 50%;
}
<a href="http://somerandomlinks.com">Some Random link...</a>
<!--example link only -->
Instead, it turns into a weird oval-shaped thing. Note: I'm using a stack overflow button as an example. Sorry for the blurry image.

Upvotes: 0

Views: 3426

Answers (4)

Martin
Martin

Reputation: 2424

You were actually really close, I just did a simple edit.

The CSS property border-radius basically counds your corners, and the higher the value, the more sharp of a rounding will occur. 50% is actually a lot, so that's why it takes that long oval shape that you are mentioning.

Refer to this example:

/* this is my current code (css) */
a:hover {
background-color: #eff0f1;
border-radius: 4px;
}
<a href="http://somerandomlinks.com">Some Random link...</a>
<!--example link only -->

Example with more oval shape:

/* this is my current code (css) */
a{
    padding: 10px;
}

a:hover {
    background-color: #eff0f1;
    border-radius: 50px;
}
<a href="http://somerandomlinks.com">Some Random link...</a>
    <!--example link only -->

Alternatively, if you want a background that exceeds that of the link text, you could construct a div that has a default property of background-color: transparent; and then upon hover, you remove that CSS property again, and add your desired background-color and border-radius with the values to your liking.

Example:

/* this is my current code (css) */
.link-background {
  background-color: transparent;
}

.link-background{
  padding: 0.8%;
  width: 22%;
}

.link-background:hover{
  background-color: #eff0f1;
  border-radius: 4px;
}
<div class="link-background">
<a href="http://somerandomlinks.com">Some Random link...</a>
<!--example link only -->
</div>

Upvotes: 1

confusedGuy
confusedGuy

Reputation: 71

you must be looking for something like this:

<a href="#" class="btn-default">example</a>

style:

<style>
.btn-default{
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    text-decoration: none; z-index: 1;
}

.btn-default:hover{
    background: none;
    color: #ffffff;
    text-decoration:none;
}

.btn-default::before{
    content: "";
    background:#666666;
    position: absolute;
    left: 0; right: 0;
    bottom: 0; top:0;
    border-radius: 50%;
    transform: scale(0);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    transition: transform 300ms ease-in-out;
    -webkit-transition: transform 300ms ease-in-out;
    -moz-transition: transform 300ms ease-in-out;
    z-index: -1;
}

.btn-default:hover::before{
    transform: scale(1);
}
</style>

Upvotes: 0

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

use border-radius: 50px; and padding:10px; instead of border-radius: 50%;

a:hover {
  background-color: gray;
  border-radius: 50px;
  padding: 10px;
}
<br>
<a href="http://somerandomlinks.com">Some Random link...</a>
<!--example link only -->

Upvotes: 2

Harsh
Harsh

Reputation: 1695

You are going in the right direction but you just need to fill the space around your text with some padding to make it look more appropriate.

a:hover {
background-color: gray;
border-radius: 13px;
  padding: 10px;
}

Link: https://codepen.io/Harsh89/pen/RYeWvX

Upvotes: 0

Related Questions