Оформление ссылок

Ссылка с фоном

Создадим ссылку с классом .link-text:

<a href="#" class="link-text">Ut labore et dolore magna aliqua</a>

Пропишем стили:

.link-text {
	padding: 1px 3px; /*Отступы внутри ссылки*/
	background-color: #f53799; /*Цвет фона ссылки*/
	text-decoration: none; /*Ссылка без подчеркивания*/
	font-size: 13px; /*Размер текста*/
	color: white; /*Цвет ссылки*/
	border-radius: 2px; /*Скругленные углы*/
	-webkit-border-radius: 2px; /*Скругленные углы*/
	-moz-border-radius: 2px;/*Скругленные углы*/
}

.link-text:hover {
	background-color: #db0071; /*Цвет фона ссылки*/
}

Получим:

Оформление ссылок

Изображение ссылка

В html-документе запишем:

<a href="#"><img src="/images/img.jpg" alt="Image links"></a>

В стилях убираем пунктирную линию вокруг изображения ссылки:

a img {
	border: none; /*Убираем границу*/
	outline: none; /*Убираем рамку*/
}

Далее запишем следующие свойства:

a img{
	border: 10px solid #dddddd; /*Граница вокруг изображения*/
	margin: 0 15px 15px 0; /*Отступы от изображения*/
	-webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши, в нашем примере будет изменяться прозрачность и цвет границы*/
	-moz-transition: all linear 0.3s;
	-ms-transition: all linear 0.3s;
	-o-transition: all linear 0.3s;
	transition: all linear 0.3s;
	opacity: 0.5; /*Прозрачность изображения*/
}

a:hover img {
	opacity: 1; /*Делаем изображения непрозрачным*/
	border: 10px solid #afd3dc; /*Изменяем цвет границы*/
}

Получим:

Оформление ссылок

Пунктирная ссылка

В html-документе создадим ссылку с классом .blockDashed:

<a href="#" class="blockDashed">Lorem ipsum dolor sit amet...</a>

В стилях запишем:

.blockDashed {
	display: inline-block; /*Встроенный-блочный элемент*/
	font-size: 13px; /*Размер текста*/
	width: 200px; /*Ширина блока*/
	padding: 10px; /*Отступы внутри блока*/
	text-decoration: none; /*Ссылка без подчеркивания*/
	color: #666666; /*Цвет текста ссылки*/
	background-color: white; /*Фон ссылки*/
	border: 1px dashed #cccccc; /*Пунктирная граница*/
	opacity: 0.5; /*Прозрачная ссылка*/
	border-radius: 4px; /*Скругленные углы у ссылки*/
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
	margin: 0 15px 15px 0; /*Отступы от ссылки справа и снизу*/
}

.blockDashed:hover {
	border: 1px dashed #0980d3; /*Изменяем цвет границы ссылки при наведении на нее курсора мыши*/
	opacity: 1; /*Делаем ссылку непрозрачной*/
}

Получим:

Оформление ссылок

Примеры здесь.

Источник: http://psd-html-css.ru/css-notes/oformlenie-ssylok

Читать комменты и комментировать

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



Защитный код
Обновить

Оформление ссылок | | 2012-07-02 23:42:00 | | Статьи Web-мастеру | | Ссылка с фономСоздадим ссылку с классом .link-text:Ut labore et dolore magna aliquaПропишем стили:.link-text { padding: 1px 3px; /*Отступы внутри ссылки*/ background-color: #f53799; /*Цвет фона | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: