Спецэффекты для ссылок с :active

Создание интересных спецэффектов для ссылок с помощью :active.

<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Rollovers 2</title>
	body {
		font: 12px arial, helvetica, sans-serif;

	div a {
		/* Note: Using 'div a' (targeting all a elements inside div elements) instead of simply 'a' (all a elements) so that this doesn't target the link back to HTML Dog at the bottom of the page */
		display: block;
		width: 200px;
		height: 63px;
		background-image: url(https://foxyforex.ru/wp-content/uploads/2023/09/toucancombo2.jpg);
		text-indent: -999em;
		text-decoration: none;

	a:hover {
		background-position: center;

	a:active {
		background-position: bottom;
		<p><a href="#">Toucan</a></p>
		<p><a href="#">Toucan</a></p>
		<p><a href="#">Toucan</a></p>

Страницы в тему:

Добавить комментарий