CODEWITHSUNDEEP
htmlcss
bpoklar
bpoklar

Reputation: 69

Buttons size on hover

New to web design. Can someone please explain this to me. I have two buttons in the same row. I've set up the border to show up on one button on hover. The problem is that the button size change. Sometimes width, sometimes height, spacing... Had the same problem before while styling menu links. I would like to know how to set up css in the way that the button sizes stay the same. Than you in advance

.btn-container {
    display: flex;
}

.btn-container a {
    display: block;
    height: 3em;
    padding: 1em 3em;
    margin-right: 2em; 
    border-radius: .5em;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-container #btn_1 {
    background: #59ED99;
    color: white;
    font-weight: 500;
}

.btn-container #btn_2 {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}

.btn-container #btn_1:hover {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}
<div class="btn-container">
  <a href="#" id="btn_1">Get Started</a>
  <a href="#" id="btn_2">Learn More</a>
</div>

Upvotes: 0

Views: 142

Answers (2)

Lucien Dubois
Lucien Dubois

Reputation: 1694

You would need to put a transparent border for the first button (#btn_1). This way, a border is not added on hover.

.btn-container {
    display: flex;
}

.btn-container a {
    display: block;
    height: 3em;
    padding: 1em 3em;
    margin-right: 2em; 
    border-radius: .5em;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-container #btn_1 {
    background: #59ED99;
    border: .1em solid transparent;
    color: white;
    font-weight: 500;
}

.btn-container #btn_2 {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}

.btn-container #btn_1:hover {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}
<div class="btn-container">
  <a href="#" id="btn_1">Get Started</a>
  <a href="#" id="btn_2">Learn More</a>
</div>

For the size issue, we would need to know more about the base stylesheet. You could also set a specific width and height. You could also set a max-height attribute.

Upvotes: 2

Gaurav Bhardwaj
Gaurav Bhardwaj

Reputation: 338

* {
  box-sizing: border-box;
}

.btn-container {
    display: flex;
}

.btn-container a {
    display: block;
    height: 3em;
    padding: 1em 3em;
    margin-right: 2em; 
    border-radius: .5em;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-container #btn_1 {
    background: #59ED99;
    border: .1em solid transparent;
    color: white;
    font-weight: 500;
}

.btn-container #btn_2 {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}

.btn-container #btn_1:hover {
    border-color: #59ED99;
    background: transparent;
    color: #59ED99;
}
<div class="btn-container">
  <a href="#" id="btn_1">Get Started</a>
  <a href="#" id="btn_2">Learn More</a>
</div>

Upvotes: 1

Related Questions