Css, градиентится Margin. Как исправить?

Question

[Denis Цаль]

Начал изучать html+css и решил попроовать сделать изменяющиеся кнопки. По итогу у меня есть это:

.home {
display: inline-block;
color: #000; /* Цвет текста */
margin-left: 100px;
}
.home:hover {
background: linear-gradient(to bottom, #000000, #000000); /* Градиент */
color: #FFFFFF;
}

и вот это:

<div>
<form method="get" action="#7" class="home">
<button class="home">
<img src="1/home.png" alt="" style="vertical-align:middle" width=33 height=19 hspace="5" vspace="5"> 
На базу
</button>
</form>
<button class="home">
<img src="1/plus.png" alt="" style="vertical-align:middle" width=33 height=19 hspace="5" vspace="5"> 
1
</button >
<button class="home">
<img src="1/minus.jpg" alt="" style="vertical-align:middle" width=33 height=19 hspace="5" vspace="5"> 
2
</button>
</div>

Получается, что-то такое. Вторая и третья кнопка изменяется корректо, а вот у мервой кроме самой кнопки градиентится margin в 100 пикселей. Как мне сдеалть так, чтобы margin не градиентился?

Answer 1

[RAX7]

У тебя и у формы и у кнопки class="home", поэтому по ховеру к форме тоже градиент добавляется

Comments

[Denis Цаль]

Респект таким ребятам.

Answer 2

[Александр]

.home:first-child {
margin-left:0;
}