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

Сайт. На сегодняшний день, одно из самых популярных средств, для продажи собственных вещей, или развития бизнеса. Сайты занимают, чуть ли не одно из самых первых мест, что вошло в обыденный жизненный цикл человека. Захотели купить машину, узнать погоду, что происходит в мире, за последние 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>

4.25/5 (2)

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

Оцените