Как заставить кнопки увеличиваться / уменьшаться в ответ на наведение курсора на них?

Question

У меня есть несколько простых стилизованных кнопок на странице моего проекта для моего класса веб-разработки, и я хотел знать, возможно ли сделать так, чтобы кнопки реагировали, когда на них наводит курсор мыши пользователь. Растет при наведении и сжимается, когда мышь уходит. Я довольно новичок в веб-разработке, поэтому я не был уверен, что это что-то выполнимое в HTML / CSS, или это потребует javascript мастеринга.

Answer 1

довольно просто. просто используйте css и наведите курсор на кнопку

button:hover{

width:120px;
height:60px;
display:inline-block;
font-size:24px;
}

<button>click me</button>

Answer 2

В CSS есть селектор :hover, который может помочь вам достичь этого. Если у вашей кнопки есть какой-то класс, например, «sendForm», вы можете сделать что-то вроде:

.sendForm {
    width: 2rem; //or other units
}
.sendForm:hover {
    width: 4rem; // or other units
}

Однако я бы рекомендовал изменить размер отступа для кнопки, чтобы текст всегда помещался внутри, например:

.sendForm {
    display: inline-block;
    padding: 0 8px 0 8px; 
}
.sendForm:hover {
    padding: 0 16px 0 16px; 
}

Вы также можете использовать сокращенную запись: padding: 0 8px; Пожалуйста, обратитесь к MDn, если вы хотите узнать больше о нотации заполнения в CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/padding