HTML: Want to make a button List and the Text doesn't change color

Question

I want to make a button that is already finished, I implemented an "h3" but when I hover the button the text doesn't change the colour, how I can do it in CSS.

That's the code of the button:

 <button><img src="Images/pack1.png"></img><h3>MVP</h3><h2>10$</h2></button>

Next Problem, I want to make that the buttons are adjacent but it doesn't work. I already put them in a list.

That's the code:

 #shop ul li { float: right; margin: 10px; padding-top: 100px; padding-bottom: 25px; } #shop button { font-family: 'Roboto Slab', serif; width: 400px; height: 430px; float: right; border-radius: 4px; border: 2px solid; font-size: 15px; background-color: #f0f0f0; color:#494949; margin-right: 1450px; } #shop button:hover { background-color: #494949; color: #f0f0f0; }

 <section id="shop"> <div> <ul> <li><button><img src="Images/pack1.png"></img><h3>VIP</h3><h2>5$</h2></button></li> <li><button><img src="Images/pack1.png"></img><h3>MVP</h3><h2>10$</h2></button></li> </ul> </div> </section>

Can anybody help me?

Answer 1

You have incorrect syntax, h2 and h3 cannot be children of button . You can remove the button though and still get the desired result. I reworked your code and used flexbox to align your buttons adjacent to one another.

 #shop ul { list-style-type: none; display: flex; } img { width: 80%; margin: 0 auto; } #shop ul li { display: flex; flex-direction: column; align-items: center; margin: 10px; padding-top: 100px; font-family: 'Roboto Slab', serif; width: 400px; height: 430px; border-radius: 4px; border: 2px solid; font-size: 15px; background-color: #f0f0f0; color:#494949; } #shop li:hover { background-color: #494949; color: #f0f0f0; }

 <section id="shop"> <div> <ul> <li><img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Felis_catus-cat_on_snow.jpg"><h3>VIP</h3><h2>5$</h2></li> <li><img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Felis_catus-cat_on_snow.jpg"><h3>MVP</h3><h2>10$</h2></li> </ul> </div> </section>

Answer 2

What you did is correct, for displaying the buttons next to each other you could use display: inline-block .

 button:hover { background-color: #494949; color: #f0f0f0; }.inline { display: inline-block; }

 <button>A</button> <button>B</button>

Answer 3

If you want to change the colour of the h3 or h2 and put the buttons inline with each other

 #shop button:hover h3,
 #shop button:hover h2 {
   background-color: #494949;
   color: #f0f0f0;
 }

 #shop ul li {
   display: inline-block;
 }

Answer 4

first of all your each button has margin-right: 1450px, maybe it's a mistake? if you need that the buttons were in line, the parent div must be display: flex, if you change the margin-rigth and parent div - thats will be ok.