CODEWITHSUNDEEP
css
slammedacura27
slammedacura27

Reputation: 77

Increase background size around link/button

I have a navbar on the left, with 3 buttons from fontawesome that are also links.

I have a hover set for the buttons with a red background, however when hovering, it doesn't fill the white space on the left and right of the button.

Whatever I method I try with modifying padding/margin it does not produce a proper result.

Is there an way that I can get the red background hover to fully cover the left and right width of the white navbar?

CodePen Link

HTML:

<!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" href="./style.css">
        <title>test</title>
          <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
      </head>
      <body>
        <div class="frontpage">
          <div class="buttons">
          <a href=""><i class="icon-user icon-3x"></i></a>
          <a href=""><i class="icon-folder-open icon-3x"></i></a>
          <a href=""><i class="icon-envelope icon-3x"></i></a>
          </div>
          <div class="firstpage">
            <p>HELLO</p>
            <p>Welcome to my Portfolio!</p>
            </div>
          </div>
      </body>

CSS:

*{
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}
.frontpage{
  display: flex;

}

.firstpage{
background-color: black;
height: 100vh;
width: 100vw;
margin-left: 3px;
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 40px;
}
.buttons{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-left: 3px;
}
.firstpage p{
  color: white;
  display: flex;
}
.buttons a{
  text-decoration: none;
  color: black;
}
.buttons a:hover{
background-color: red;
color: white;
}

Upvotes: 0

Views: 464

Answers (2)

Karuppiah RK
Karuppiah RK

Reputation: 3964

JsFiddle

.buttons a {
    text-decoration: none;
    color: black;
    width: 100%;
    text-align: center;
    padding: 0px 5px;
}

remove margin-left from .button class

.buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

and also remove margin-left from .firstpage class

.firstpage {
    background-color: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 40px;
}

Upvotes: 3

Muhammad Kamran
Muhammad Kamran

Reputation: 561

Hi I have edited your css

Try This:

*{
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}
.frontpage{
  display: flex;

}

.firstpage{
  background-color: black;
  height: 100vh;
  width: 100vw;
  margin-left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 40px;
}
.buttons{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-left: 0px;
}
.firstpage p{
  color: white;
  display: flex;
}
.buttons a{
    text-decoration: none;
    color: black;
    width: 100%;
    display: block;
    text-align: center;
}
.buttons a:hover{
background-color: red;
color: white;
}

Upvotes: 0

Related Questions