Оформление ссылок внутри текста

Используйте все ниже изложенные варианты с осторожностью, применяя их только к тем блокам, к которым нужно. Иначе они могут повредить другие ссылки на сайте, например, меню.

Вариант 1:

Lorem ipsum dolor sit amet, te laudem oblique eligendi sit. Ea sit stet tacimates, eum cu quot soluta iisque, sea delenit delectus cu. Для просмотра эффекта ссылки, наведите на нее кусор. Nec ex debet epicurei deseruisse. Case ipsum delicata vim ea, reprimique omittantur ius no. In est prompta scripserit.

<div class="container-1">	
	<p><a href="#">Ссылка.</a></p>	
</div>

<p><a href="#">Ссылка.</a></p>

</div>

.container-1 a {
	color: #3399FF;
	text-decoration:none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	position: relative;
	display:inline-block;
}	
.container-1 a:hover {
	color: #337AB7;
	text-decoration:none;
}		
.container-1 a::before {
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height:1px;
	background: #3399FF;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(6px);
	-moz-transform: translateY(6px);
	transform: translateY(6px);
	pointer-events: none;
}
.container-1 a:hover::before,
.container-1 a:focus::before {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.container-1 a {

color: #3399FF;

text-decoration:none;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

position: relative;

display:inline-block;

}

.container-1 a:hover {

color: #337AB7;

text-decoration:none;

}

.container-1 a::before {

position: absolute;

top: 100%;

right: 0;

width: 100%;

height:1px;

background: #3399FF;

content: '';

opacity: 0;

-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

-moz-transition: opacity 0.3s, -moz-transform 0.3s;

transition: opacity 0.3s, transform 0.3s;

-webkit-transform: translateY(6px);

-moz-transform: translateY(6px);

transform: translateY(6px);

pointer-events: none;

}

.container-1 a:hover::before,

.container-1 a:focus::before {

opacity: 1;

-webkit-transform: translateY(0px);

-moz-transform: translateY(0px);

transform: translateY(0px);

}

Вариант 2:

<div class="container-2">	
	<p><a href="#">Ссылка.</a></p>	
</div>

<p><a href="#">Ссылка.</a></p>

</div>

.container-2 a {
	color: #3399FF;
	text-decoration:none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	position: relative;
	display:inline-block;
}	
.container-2 a:hover {
	color: #337AB7;
	text-decoration:none;
}		
.container-2 a::before,
.container-2 a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 1px;
	background: #3399FF;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0);
}
.container-2 a::after {
	opacity: 0;
	-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: top 0.3s, opacity 0.3s, transform 0.3s;
}
.container-2 a:hover::before,
.container-2 a:hover::after,
.container-2 a:focus::before,
.container-2 a:focus::after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}
.container-2 a:hover::after,
.container-2 a:focus::after {
	top: 0%;
	opacity: 1;
}

.container-2 a {

color: #3399FF;

text-decoration:none;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

position: relative;

display:inline-block;

}

.container-2 a:hover {

color: #337AB7;

text-decoration:none;

}

.container-2 a::before,

.container-2 a::after {

position: absolute;

top: 100%;

left: 0;

width: 100%;

height: 1px;

background: #3399FF;

content: '';

-webkit-transition: -webkit-transform 0.3s;

-moz-transition: -moz-transform 0.3s;

transition: transform 0.3s;

-webkit-transform: scale(0);

-moz-transform: scale(0);

transform: scale(0);

}

.container-2 a::after {

opacity: 0;

-webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;

-moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;

transition: top 0.3s, opacity 0.3s, transform 0.3s;

}

.container-2 a:hover::before,

.container-2 a:hover::after,

.container-2 a:focus::before,

.container-2 a:focus::after {

-webkit-transform: scale(1);

-moz-transform: scale(1);

transform: scale(1);

}

.container-2 a:hover::after,

.container-2 a:focus::after {

top: 0%;

opacity: 1;

}

Вариант 3:

<div class="container-3">	
	<p><a href="#">Ссылка.</a></p>	
</div>

<p><a href="#">Ссылка.</a></p>

</div>

.container-3 a {
	color: #3399FF;
	text-decoration:none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	position: relative;
	display:inline-block;
}	
.container-3 a:hover {
	color: #337AB7;
	text-decoration:none;
}		
.container-3 a::before {
	position: absolute;
	top: 100%;
	left: 50%;
	color: transparent;
	content: '•';
	text-shadow: 0 0 transparent;
	font-size: 12px;
	-webkit-transition: text-shadow 0.3s, color 0.3s;
	-moz-transition: text-shadow 0.3s, color 0.3s;
	transition: text-shadow 0.3s, color 0.3s;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
	line-height:.1em;
}
.container-3 a:hover::before,
.container-3 a:focus::before {
	color: #3399FF;
	text-shadow: 12px 0 #3399FF, -12px 0 #3399FF;
}

.container-3 a {

color: #3399FF;

text-decoration:none;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

position: relative;

display:inline-block;

}

.container-3 a:hover {

color: #337AB7;

text-decoration:none;

}

.container-3 a::before {

position: absolute;

top: 100%;

left: 50%;

color: transparent;

content: '•';

text-shadow: 0 0 transparent;

font-size: 12px;

-webkit-transition: text-shadow 0.3s, color 0.3s;

-moz-transition: text-shadow 0.3s, color 0.3s;

transition: text-shadow 0.3s, color 0.3s;

-webkit-transform: translateX(-50%);

-moz-transform: translateX(-50%);

transform: translateX(-50%);

pointer-events: none;

line-height:.1em;

}

.container-3 a:hover::before,

.container-3 a:focus::before {

color: #3399FF;

text-shadow: 12px 0 #3399FF, -12px 0 #3399FF;

}

Вариант 4:

<div class="container-4">	
	<p><a href="#">Ссылка.</a></p>	
</div>

<p><a href="#">Ссылка.</a></p>

</div>

.container-4 {
	overflow:hidden;
}
.container-4 a {
	color: #3399FF;
	text-decoration:none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	position: relative;
	display:inline-block;
}	
.container-4 a:hover {
	color: #337AB7;
	text-decoration:none;
}		
.container-4 a::before,
.container-4 a::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	border: 8px solid #3399FF;
	border-radius: 50%;
	content: '';
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
	transform: translateX(-50%) translateY(-50%) scale(0.1);
	pointer-events: none;
}
.container-4 a::after {
	width: 20px;
	height: 20px;
	border-width: 16px;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
	transform: translateX(-50%) translateY(-50%) scale(0.1);
}
.container-4 a:hover::before,
.container-4 a:hover::after,
.container-4 a:focus::before,
.container-4 a:focus::after {
	opacity: 0.2;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}

.container-4 {

overflow:hidden;

}

.container-4 a {

color: #3399FF;

text-decoration:none;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

position: relative;

display:inline-block;

}

.container-4 a:hover {

color: #337AB7;

text-decoration:none;

}

.container-4 a::before,

.container-4 a::after {

position: absolute;

top: 50%;

left: 50%;

width: 60px;

height: 60px;

border: 8px solid #3399FF;

border-radius: 50%;

content: '';

opacity: 0;

-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;

-moz-transition: -moz-transform 0.3s, opacity 0.3s;

transition: transform 0.3s, opacity 0.3s;

-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);

-moz-transform: translateX(-50%) translateY(-50%) scale(0.1);

transform: translateX(-50%) translateY(-50%) scale(0.1);

pointer-events: none;

}

.container-4 a::after {

width: 20px;

height: 20px;

border-width: 16px;

-webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);

-moz-transform: translateX(-50%) translateY(-50%) scale(0.1);

transform: translateX(-50%) translateY(-50%) scale(0.1);

}

.container-4 a:hover::before,

.container-4 a:hover::after,

.container-4 a:focus::before,

.container-4 a:focus::after {

opacity: 0.2;

-webkit-transform: translateX(-50%) translateY(-50%) scale(1);

-moz-transform: translateX(-50%) translateY(-50%) scale(1);

transform: translateX(-50%) translateY(-50%) scale(1);

}

Вариант 5:

Lorem ipsum dolor sit amet, te laudem oblique eligendi sit. Ea sit stet tacimates, eum cu quot soluta iisque, sea delenit delectus cu. Nec ex debet epicurei deseruisse. Case ipsum delicata vim ea, reprimique omittantur ius no. In est prompta scripserit. Еще одна ссылка .Lorem ipsum dolor sit amet, te laudem oblique eligendi sit. Ea sit stet tacimates, eum cu quot soluta iisque, sea delenit delectus cu. Nec ex debet epicurei deseruisse. Case ipsum delicata vim ea, reprimique omittantur ius no. In est prompta scripserit.

<div class="container-5">	
	<p><a href="#">Ссылка.</a></p>	
</div>

<p><a href="#">Ссылка.</a></p>

</div>

.container-5 {
	overflow:hidden;
}	
.container-5 a {
	color: #3399FF;
	text-decoration:none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	position: relative;
	display:inline-block;
}	
.container-5 a:hover {
	color: #337AB7;
	text-decoration:none;
}		
.container-5 a::before,
.container-5 a::after {
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	height: 1px;
	background: #337AB7;
	opacity: 0;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	pointer-events: none;
	line-height: 0.1em;
}
.container-5 a::before {
	-webkit-transform: translateY(-0.8em);
	-moz-transform: translateY(-0.8em);
	transform: translateY(-0.8em);
}
.container-5 a::after {
	-webkit-transform: translateY(0.8em);
	-moz-transform: translateY(0.8em);
	transform: translateY(0.8em);
}
.container-5 a:hover::before,
.container-5 a:hover::after,
.container-5 a:focus::before,
.container-5 a:focus::after {
	opacity: 0.4;
	background: #3399FF;
}
.container-5 a:hover::before,
.container-5 a:focus::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.container-5 a:hover::after,
.container-5 a:focus::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.container-5 {

overflow:hidden;

}

.container-5 a {

color: #3399FF;

text-decoration:none;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

position: relative;

display:inline-block;

}

.container-5 a:hover {

color: #337AB7;

text-decoration:none;

}

.container-5 a::before,

.container-5 a::after {

position: absolute;

width: 100%;

left: 0;

top: 50%;

height: 1px;

background: #337AB7;

opacity: 0;

content: '';

-webkit-transition: -webkit-transform 0.3s;

-moz-transition: -moz-transform 0.3s;

transition: transform 0.3s;

pointer-events: none;

line-height: 0.1em;

}

.container-5 a::before {

-webkit-transform: translateY(-0.8em);

-moz-transform: translateY(-0.8em);

transform: translateY(-0.8em);

}

.container-5 a::after {

-webkit-transform: translateY(0.8em);

-moz-transform: translateY(0.8em);

transform: translateY(0.8em);

}

.container-5 a:hover::before,

.container-5 a:hover::after,

.container-5 a:focus::before,

.container-5 a:focus::after {

opacity: 0.4;

background: #3399FF;

}

.container-5 a:hover::before,

.container-5 a:focus::before {

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

}

.container-5 a:hover::after,

.container-5 a:focus::after {

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

transform: rotate(-45deg);

}

Вариант 6:

<div class="container-6">	
	<p><a href="#">Ссылка.</a></p>	
</div>

<p><a href="#">Ссылка.</a></p>

</div>

.container-6 a {
	color: #3399FF;
	text-decoration:none;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	display:inline-block;
}	
.container-6 a:hover {
	color: #337AB7;
	text-decoration:none;
}		
.container-6 a:after {
    display: block;
    content: "";
    height: 1px;
    width: 0%;
    background-color: #3399FF;
    transition: width 0.4s ease-in-out;
}
.container-6 a:hover:after,
.container-6 a:focus:after {
    width: 100%;
}

.container-6 a {

color: #3399FF;

text-decoration:none;

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

display:inline-block;

}

.container-6 a:hover {

color: #337AB7;

text-decoration:none;

}

.container-6 a:after {

display: block;

content: "";

height: 1px;

width: 0%;

background-color: #3399FF;

transition: width 0.4s ease-in-out;

}

.container-6 a:hover:after,

.container-6 a:focus:after {

width: 100%;

}

Вариант 7:

<div class="container-7">	
	<p><a href="#">Ссылка.</a></p>	
</div>

<p><a href="#">Ссылка.</a></p>

</div>

.container-7 a {
	color: #3399FF;
	text-decoration:none;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	position:relative;
	display:inline-block;
}	
.container-7 a:hover {
	text-decoration:none;
	color: #337AB7;
	z-index:1;
	position:relative;
}		
.container-7 a::after{
	position: fixed;
	width: 100%;
	height: 100%;
	content: "";
	z-index:-1;
	top:0;
	left:0;
	pointer-events: none;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	opacity:0;
}
.container-7 a:hover::after,
.container-7 a:focus::after {
	background: #FFF;
	opacity:0.8;
}

.container-7 a {

color: #3399FF;

text-decoration:none;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

position:relative;

display:inline-block;

}

.container-7 a:hover {

text-decoration:none;

color: #337AB7;

z-index:1;

position:relative;

}

.container-7 a::after{

position: fixed;

width: 100%;

height: 100%;

content: "";

z-index:-1;

top:0;

left:0;

pointer-events: none;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

opacity:0;

}

.container-7 a:hover::after,

.container-7 a:focus::after {

background: #FFF;

opacity:0.8;

}

Вариант 8:

<div class="container-8">	
	<p><a href="#">Ссылка.</a></p>	
</div>

<p><a href="#">Ссылка.</a></p>

</div>

.container-8 a {
	color: #000;
	text-decoration:none;
	position:relative;
	display:inline-block;
}	
.container-8 a:hover {
	text-decoration:none;
}		

.container-8 a::before{
	content: "";
	position: absolute; 
	top: 0; 
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) no-repeat 100% 0%;
	background-size: 100% 100%;
}
.container-8 a:hover::before,
.container-8 a:focus::before {
	transition: 0.5s linear;
	background-size: 0 100%;
}
.container-8 a::after {
	position: absolute; 
    display: block;
    content: "";
    height: 1px;
    width: 100%;
    background-color: #3399FF;
    transition: width 0.5s ease-in-out;
}
.container-8 a:hover::after,
.container-8 a:focus::after {
    width: 0%;
	right:0;
	}

.container-8 a {

color: #000;

text-decoration:none;

position:relative;

display:inline-block;

}

.container-8 a:hover {

text-decoration:none;

}

.container-8 a::before{

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) no-repeat 100% 0%;

background-size: 100% 100%;

}

.container-8 a:hover::before,

.container-8 a:focus::before {

transition: 0.5s linear;

background-size: 0 100%;

}

.container-8 a::after {

position: absolute;

display: block;

content: "";

height: 1px;

width: 100%;

background-color: #3399FF;

transition: width 0.5s ease-in-out;

}

.container-8 a:hover::after,

.container-8 a:focus::after {

width: 0%;

right:0;

}

И напоследок, пара примеров с использованием jQuery и jMagnify

Вариант 9:

<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://atuin.ru/js/art/jquery.jMagnify.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.container-9 a').jMagnify({
		centralEffect: {'color': '#000'},
		lat1Effect: {'color': '#004488'},
		lat2Effect: {'color': '#0070DF'},
		lat3Effect: {'color': '#2D96FF'},
		resetEffect: {'color': '#3399FF'}
});
});
</script>
<div class="container-9">	
	<p><a href="#">Ссылка.</a></p>	
</div>

$(document).ready(function() {

$('.container-9 a').jMagnify({

centralEffect: {'color': '#000'},

lat1Effect: {'color': '#004488'},

lat2Effect: {'color': '#0070DF'},

lat3Effect: {'color': '#2D96FF'},

resetEffect: {'color': '#3399FF'}

});

</script>

<p><a href="#">Ссылка.</a></p>

</div>

.container-9 a {
	color: #3399FF;
	text-decoration:none;
}	
.container-9 a:hover {
	text-decoration:none;
}

.container-9 a {

color: #3399FF;

text-decoration:none;

}

.container-9 a:hover {

text-decoration:none;

}

Вариант 10:

<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://atuin.ru/js/art/jquery.jMagnify.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.container-10 a').jMagnify({
		centralEffect: {'border-bottom': '4px solid #337AB7'},
		lat1Effect: {'border-bottom': '3px solid #337AB7'},
		lat2Effect: {'border-bottom': '2px solid #337AB7'},
		lat3Effect: {'border-bottom': '1px solid #337AB7'},
		resetEffect: {'border': '0'}
});
});
</script>
<div class="container-10">	
	<p><a href="#">Ссылка.</a></p>	
</div>

$(document).ready(function() {

$('.container-10 a').jMagnify({

centralEffect: {'border-bottom': '4px solid #337AB7'},

lat1Effect: {'border-bottom': '3px solid #337AB7'},

lat2Effect: {'border-bottom': '2px solid #337AB7'},

lat3Effect: {'border-bottom': '1px solid #337AB7'},

resetEffect: {'border': '0'}

});

</script>

<p><a href="#">Ссылка.</a></p>

</div>

.container-10 a {
	color: #3399FF;
	text-decoration:none;
}	
.container-10 a:hover {
	text-decoration:none;
}

.container-10 a {

color: #3399FF;

text-decoration:none;

}

.container-10 a:hover {

text-decoration:none;

}

Другие варианты оформления ссылок

Описывать, как работает каждый из вариантов,я не стал, думаю, разберетесь.

Если возникнут вопросы, или нашли какую-то ошибку, пишите комментарии, не стесняйтесь.

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Вариант 5:

Вариант 6:

Вариант 7:

Вариант 8:

Вариант 9:

Вариант 10:

Смотрите также:

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

Комментарии: