+7 (989) 614-27-07
suite_info@bk.ru

Блог

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

Представляем Вашему вниманию несколько вариантов оформления ссылок внутри текста.

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

Отличие состоит лишь в том, что почти во всех вариантах, к ссылке применяется inline-block, т. е. если ссылка не уместится в 1 строку, она вся перенесется на следующую.

Пример 1

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-1">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <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);
}

Пример 2

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-2">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <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;
}

Пример 3

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-3">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <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;
}

Пример 4

  • Пример
  • HTML
  • CSS

Тестовый текст рыба Тестовый текст рыба Тестовый текст рыба Тестовый текст рыба Для демонстрации эффекта ссылки, наведите на нее кусор. Тестовый текст рыба. Тестовый текст рыба Тестовый текст рыба Тестовый текст рыба

<div class="container-4">
    <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);
}

Пример 5

  • Пример
  • HTML
  • CSS

Тестовый текст рыба Тестовый текст рыба Тестовый текст рыба Тестовый текст рыба Ссылка 1 Тестовый текст рыба. Тестовый текст рыба Ссылка 2 длинная Тестовый текст рыба Тестовый текст рыба

<div class="container-5">
    <p>Тестовый текст рыба Тестовый текст рыба Тестовый текст рыба Тестовый текст рыба <a href="#">Ссылка 1</a> Тестовый текст рыба. Тестовый текст рыба <a href="#">Ссылка 2 длинная</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);
}

Пример 6

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-6">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <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%;
}

Пример 7

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-7">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <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;
}

Пример 8

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-8">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <a href="#">ссылка</a></p>
</div>
.container-8 a {
	color: #3399FF;
	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;
}

Пример 9

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-9">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <a href="#">ссылка</a></p>
</div>
.container-9 a {
	background: linear-gradient(to bottom, #337AB7 0%, #337AB7 100%);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 1px 1px;
	color: #3399FF;
	text-decoration: none;
	padding-bottom: 2px;
}

.container-9 a:hover {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23337AB7' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-2,10,-2 s 5,2,10,2 c 5,0,5,-2,10,-2 s 5,2,10,2'/%3E%3C/svg%3E");
	background-position: 0 100%;
	background-size: auto 4px;
	background-repeat: repeat-x;
	text-decoration: none;
}

Пример 10

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-10">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <a href="#">ссылка</a></p>
</div>
.container-10 a {
	text-decoration: none;
	position: relative;
	display: inline-block;
	color: #3399FF;
	transition: color .3s ease-out;
}
.container-10 a::before {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
	background: #337AB7;
	transition: height .3s ease-out;
}

.container-10 a:hover { 
	color: #fff; 
}
.container-10 a:hover::before {
	height: 100%;
}

Пример 11

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-11">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <a href="#">ссылка</a></p>
</div>
.container-11 a {
	position: relative;
	text-decoration: none;
	color: #3399FF;
	display: inline-block;
}
.container-11 a::before, 
.container-11 a::after {
	content: '';
	position: absolute;
	transition: transform .5s ease;
	left: -4px;
	top: 0;
	width: calc(100% + 8px);
	height: 100%;
	border-style: solid;
	border-color: #3399FF;
	box-sizing: border-box;
}
.container-11 a::before {
	border-width: 1px 0 1px 0;
	transform: scaleX(0);
}
.container-11 a::after {
	border-width: 0 1px 0 1px;
	transform: scaleY(0);
}
.container-11 a:hover::before, 
.container-11 a:hover::after {
	transform: scale(1, 1);
}

Пример 12

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-12">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <a href="#">ссылка</a></p>
</div>
.container-12 a {
	background: linear-gradient(to right, #BFE2FF 0%, #BFE2FF 5px, transparent 5px);
	background-repeat: repeat-x;
	background-size: 100%;
	color: #3399FF;
	padding-left: 10px;
	text-decoration: none;
}
.container-12 a:hover {
	background: linear-gradient(to right, #BFE2FF 0%, #BFE2FF 5px, transparent);
}

Пример 13

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-13">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <a href="#">ссылка</a></p>
</div>
.container-13 a {
	color: #3399FF;
	text-decoration: none;
	transition: color .2s ease;	
}
.container-13 a:hover {
	animation: blur 1s ease-out;
	color: #000;
}
@keyframes blur {
    from {
        text-shadow:0px 0px 10px #BFE2FF,
        0px 0px 10px #BFE2FF, 
        0px 0px 25px #BFE2FF,
        0px 0px 25px #BFE2FF,
        0px 0px 25px #BFE2FF,
        0px 0px 25px #3399FF,
        0px 0px 50px #3399FF,
        0px 0px 50px #3399FF;
	}
}

Пример 14

  • Пример
  • HTML
  • CSS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-14">
    <p>Текст рыба <a href="#">Очень длинная ссылка</a> текст рыба <a href="#">ссылка</a></p>
</div>
.container-14 a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: #3399FF;
}
.container-14 a:hover {
	color: #000;
}
.container-14 a::before{
	content: "";
	width: 0;
	height: 100%;
	background-image: linear-gradient(to top, #BFE2FF 25%, transparent 40%);
	position: absolute;
	left: 0;
	z-index: -1;	
	transform: rotate(-1deg);
	transform-origin: left bottom;
	transition: width .1s ease-out;
}
.container-14 a:hover::before{
	width: 100%;
}

Пример 15

Для демонстрации эффекта кликните по ссылке.

  • Пример
  • HTML
  • CSS
  • JS

Текст рыба Очень длинная ссылка текст рыба ссылка

<div class="container-15">
    <p>Текст рыба <a href="##">Очень длинная ссылка</a> текст рыба <a href="##">ссылка</a></p>
</div>
.container-15 a {
	color: #3399FF;
}
var anchors = document.querySelectorAll('.container-15 a')

Array.prototype.forEach.call(anchors, function(anchor) {
	anchor.addEventListener('click', explode)
})

function explode(e) {
	var x = e.clientX
	var y = e.clientY
	var c = document.createElement('canvas')
	var ctx = c.getContext('2d')
	var ratio = window.devicePixelRatio
	var particles = []
	
	document.body.appendChild(c)
	
	c.style.position = 'fixed'
	c.style.zIndex = 100000; 
	c.style.left = (x - 100) + 'px'
	c.style.top = (y - 100) + 'px'
	c.style.pointerEvents = 'none'
	c.style.width = 200 + 'px'
	c.style.height = 200 + 'px'
	c.width = 200 * ratio
	c.height = 200 * ratio
	
	function Particle() {
		return {
			x: c.width / 2,
			y: c.height / 2,
			radius: r(20,30),
			color: 'rgb(' + [r(0,255), r(0,255), r(0,255)].join(',') + ')',
			rotation: r(0,360, true),
			speed: r(8,12),
			friction: 0.9,
			opacity: r(0,0.5, true),
			yVel: 0,
			gravity: 0.1
		}
	}
	
	for(var i=0; ++i<25;) {
		particles.push(Particle())
	}
	function render() {
		ctx.clearRect(0, 0, c.width, c.height)
		
		particles.forEach(function(p, i) {
			
			angleTools.moveOnAngle(p, p.speed)
			
			p.opacity -= 0.01
			p.speed *= p.friction
			p.radius *= p.friction
			
			p.yVel += p.gravity
			p.y += p.yVel
			
			if(p.opacity < 0) return
			if(p.radius < 0) return
			
			ctx.beginPath()
			ctx.globalAlpha = p.opacity
			ctx.fillStyle = p.color
			ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, false)
			ctx.fill()
		})
	}
	
	;(function renderLoop(){
		requestAnimationFrame(renderLoop)
		render()
	})()
	
	setTimeout(function() {
		document.body.removeChild(c)
	}, 3000)
}

var angleTools={getAngle:function(t,n){var a=n.x-t.x,e=n.y-t.y;return Math.atan2(e,a)/Math.PI*180},getDistance:function(t,n){var a=t.x-n.x,e=t.y-n.y;return Math.sqrt(a*a+e*e)},moveOnAngle:function(t,n){var a=this.getOneFrameDistance(t,n);t.x+=a.x,t.y+=a.y},getOneFrameDistance:function(t,n){return{x:n*Math.cos(t.rotation*Math.PI/180),y:n*Math.sin(t.rotation*Math.PI/180)}}};
function r(a,b,c){ return parseFloat((Math.random()*((a?a:1)-(b?b:0))+(b?b:0)).toFixed(c?c:0)); }
Обсудить проект
Хотите обсудить проект? Есть вопросы по алгоритму работы?

Смело оставляйте заявку на нашем сайте и мы свяжемся с вами в самое ближайшее время.