Как сделать выделение кнопки при наведении?

Сайт. На сегодняшний день, одно из самых популярных средств, для продажи собственных вещей, или развития бизнеса. Сайты занимают, чуть ли не одно из самых первых мест, что вошло в обыденный жизненный цикл человека. Захотели купить машину, узнать погоду, что происходит в мире, за последние 24 часа, поговорить с друзьями – всё это, можно найти на сайтах.

Многие из вас, вероятнее всего замечали, что при наведении на некоторые элементы на сайте, те меняют своё графическое отображение. К примеру: некоторые кнопочки подсвечиваются, выделяясь среди остальных. В этой статье, я бы хотел показать, как именно добиться такого эффекта, ведь в зависимости от таких нюансов, зависит и количество пользователей на вашем сайте.

Как сделать выделение кнопки при наведении?

Кнопка
Как сделать выделение кнопки при наведении?

Кнопка при выделении

Перед тем, как перейти к созданию выделения кнопки на сайте, я бы настоятельно рекомендовал вам ознакомиться с некоторыми статьями на нашем сайте, в которых рассказано, как создать простую кнопку, а уже от них отталкиваться дальше. (ссылка 1, ссылка 2)

Как создать эффект выделение кнопки?

Для того, чтобы сделать эффект выделения кнопки, не нужно строить глобальные схемы и километровые строки кода. Всё делается намного проще. Пожалуй позволю себе пропустить тонну ненужного и написанного уже много раз одного и того же текста и возьму за основу кнопку, которую уже создавал в похожей статье.

<html>
	<head>
		<style>
			.button {
				width: 200px;
				height: 42.5px;
				background-color: #000;
				border-radius: 10px;
				color: #fff;
				font-size: 20pt;
				text-align: center;
				padding-top: 7.5px;
				cursor: pointer;
				font-family: impact;
			}
			.button img {
				float: left;
				margin-top: 7.5px;
				width: 20px;
				height: 20px;
				margin-left: 20px;
			}
			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a><div class = "button">
			<img src = "ic-menu-dark.png">
			КНОПОЧКА
		</div></a>
	</body>
</html>
Как сделать выделение кнопки при наведении?

Кнопка на сайте

Переходим к следующему пункту, а именно: созданию эффекта выделения. Как я уже и говорил, в этом нет трудности. Всё что нам нужно, это переопределить стили для кнопки при наведении на неё курсора. В стилях, существуют определённые действия, которые мы и используем. В данном случае, нам необходимо действие HOVER – которое, отвечает за наведение на элемент. Прописываем новые стили для кнопки, используя действие наведения и переназначим некоторые свойства, такие как цвет заднего фона, и цвет текста.

.button:hover {
    background-color: #fff;
    color: #000;
}
Как сделать выделение кнопки при наведении?

Получившаяся кнопочка при наведении

Не хватает небольшой рамки – своего рода контура, добавим и его:
border: 1px solid #000;

Уже лучше. Единственное что мне не нравиться, так это – то, что иконка, находящаяся в кнопке пропадает, сливаясь с фоном кнопки. Но и это не проблема для нас. Заменяем элемент IMG на DIV и настраиваем картинку через стили.

<div class = "img"></div>
.button .img {
	background-image: url("ic-menu-dark.png");
	background-size: 100%;
	float: left;
	margin-top: 7.5px;
	width: 20px;
	height: 20px;
	margin-left: 20px;
}

Немного разберем стили, и что в них происходит:

background-image – задает то самое фоновое изображение, которое в последующем будет меняться;

background-size – устанавливает размер фонового изображения, в моём случае это 100%;

float – параметр, позволяющий обтекать кнопку с левой (left) или правой стороны (right);

margin-top и margin-left – это невидимые границы, создающий отступы с верхней стороны и левой стороны. Так-же можно задать отступы с низу (bottom) и права (right);

width – ширина картинки.

height – высота картинки.
Плавно перетекаем дальше, а именно к изменению картинки при наведении. Делается, это точно так же как и с кнопкой.

.button:hover .img {
    background-image: url("ic-menu-white.png");
}
Как сделать выделение кнопки при наведении?

Кнопка при наведении с изменением иконки

Вот и всё, так просто можно создать эффект выделения определённой кнопки на сайте, при наведении.
Полный код:

<html>
	<head>
		<style>
			.button {
				width: 200px;
				height: 42.5px;
				background-color: #000;
				border-radius: 10px;
				color: #fff;
				font-size: 20pt;
				text-align: center;
				padding-top: 7.5px;
				cursor: pointer;
				font-family: impact;
			}
			.button:hover {
				background-color: #fff;
				color: #000;
				border: 1px solid #000;
			}
			.button .img {
				background-image: url("ic-menu-dark.png");
				background-size: 100%;
				float: left;
				margin-top: 7.5px;
				width: 20px;
				height: 20px;
				margin-left: 20px;
			}
			.button:hover .img {
				background-image: url("ic-menu-white.png");
			}
			a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a><div class = "button">
			<div class = "img"></div> 
			КНОПОЧКА
		</div></a>
	</body>
</html>
Пока нет оценок, но вы можете быть первым!

Оцените