CODEWITHSUNDEEP
htmlcss
Louis Gray
Louis Gray

Reputation: 1

Hovering Button Issues

I have placed a button on my page and whenever I hover over that button, my text and

slightly shifts upwards. Please help (I am a beginner/novice/green) - the code will be shown below

.btn {
  font-weight: 700px;
  border-radius: 500px;
  text-transform: uppercase;
  border-color: none;
  padding: 10px;
}

.btn-xl {
  padding: 1rem 2rem;
  background-color: #4B307B;
  border-color: white;
}

.btn-xl:hover {
  background-color: gold;
  border-width: 3px;
  border-color: #4B307B;
}

hr {
  border-color: gold;
  width: 150px;
  max-width: 65px;
}
<div class="container d-flex align-items-center h-100">
  <div class="row">
    <header class="text-center col-12">
      <h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
    </header>
    <div class="buffer col-12"></div>
    **
    <section class="text-center col-12">
      <hr>
      <button class="btn btn-primary btn-xl">Find out more</button>
    </section>**
  </div>
</div>

Upvotes: 0

Views: 53

Answers (1)

John
John

Reputation: 5335

You need to add the border-width: 3px; to the .btn-xl class as well, not just the hover class. I believe its the border appearing on the hover that is causing the issue. See here: 

.btn{
    font-weight: 700px;
    border-radius: 500px;
    text-transform: uppercase;
    border-color: none;
    padding: 10px;
}

.btn-xl{
    padding: 1rem 2rem;
    background-color: #4B307B;
    border-color: white;
    border-width: 3px;

}
.btn-xl:hover{
    background-color: gold;
    border-width: 3px;
    border-color: #4B307B;

}

hr{
    border-color: gold;
    width: 150px;
    max-width: 65px;
}
<div class="container d-flex align-items-center h-100">
            <div class="row">
                <header class="text-center col-12">
                <h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
                </header>
                <div class="buffer col-12"></div>
            **<section class="text-center col-12">
                <hr>
                <button class="btn btn-primary btn-xl">Find out more</button>
            </section>**
            </div>
    </div>

Upvotes: 3

Related Questions