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

The padding property is changing all classes at the same time – Html

I’m trying to change the padding of the buttons when :hover, but the three buttons change the padding at the same time when I hover over one, and I want them to do it individually.

.buttons {
    display: flex;
    font-size: 24px;
    padding: 10px;
}

.button {
    text-align: center;
    padding: 10px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
}
  
.one:hover {
    padding: 25px;
    background-color: black;
}
<div class="buttons"> 
  <button class="button one"></button><a href="../new-odin-recipes/chikenpasta.html">Tomato & Basil Chiken Pasta</a></button>
    <button class="button two"><a href="../new-odin-recipes/BBQ-ribs.html">BBQ Ribs </a></button>
    <button class="button three"><a href="../new-odin-recipes/marsala.html">Chiken Marsala</a></button>
</div>

.one:hover does change the background color individually but the padding doesn’t. I tried removing the padding property from .buttons and .button but they still change at same time. This has to be so easy yet I’m going nuts not seeing what I’m doing wrong.

Tags:

2

Answers


  1. 0

    I edited your code like below. I added for the .buttons class display:inline and i put each button in a different div which named buttons. For hover settings in the .css file i write for one,two, three classes one by one and also for each button class named like 1-2 and 3 in css and html file. I set the position:absolute for button 1-2-3 and changed margin-left values. Additionally first buttons text is too long because of this reason i addded to .button class min-hieght:50px value and shortened the text. I hope it works for you.

    .buttons {
    display: inline;
    font-size: 24px;
    padding: 10px;
}

.button1 {
    text-align: center;
    padding: 10px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    min-height:50px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
}

.button2 {
    text-align: center;
    padding: 10px;
    position: absolute;
    margin-left: 150px;
    margin-right: auto;
    width: 150px;
    min-height:50px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
}

.button3 {
    text-align: center;
    padding: 10px;
    position: absolute;
    margin-left:300px;
    margin-right: auto;
    width: 150px;
    min-height:50px;
    background-color:rgb(2, 194, 2) ;
    border-color: black;
    color: white;
    font-weight: bold;
    transition: 0.5s;
}
  



.one:hover {
    padding: 25px;
    background-color: black;
}

.two:hover {
    padding: 25px;
    background-color: black;
}

.three:hover {
    padding: 25px;
    background-color: black;
}
    <div class="buttons"> 
    <button class="button1 one"><a href="../new-odin-recipes/chikenpasta.html">Tomato & Pasta</a></button>
</div> 
<div class="buttons"> 
    <button class="button2 two"><a href="../new-odin-recipes/BBQ-ribs.html">BBQ Ribs </a></button>
   </div> 
   <div class="buttons"> 
    <button class="button3 three"><a href="../new-odin-recipes/marsala.html">Chiken Marsala</a></button>
   </div>
    Login or Signup to reply.
  2. 0

    add the ‘align-items: start’ property to your ‘.buttons’ class selector.

    .buttons {
    display: flex;
    align-items: start; // add this
    font-size: 24px;
    padding: 10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search