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

Вариант 1:

Для просмотра эффекта наведите курсор на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект ее подчеркивания.

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

<a href="#link">ссылка</a>

</div>

.container-1 a {
	background: linear-gradient(to bottom, #337AB7 0%, #337AB7 100%);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 1px 1px;
	color: #000;
	text-decoration: none;
	padding-bottom: 2px;
}

.container-1 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;
}

.container-1 a {

background: linear-gradient(to bottom, #337AB7 0%, #337AB7 100%);

background-position: 0 100%;

background-repeat: repeat-x;

background-size: 1px 1px;

color: #000;

text-decoration: none;

padding-bottom: 2px;

}

.container-1 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;

}

Цвет почеркивания задается в параметре stroke='%23337AB7'. 337AB7 - цвет в HEX

Вариант 2:

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

<a href="#link">ссылка</a>

</div>

.container-2 a {
	text-decoration: none;
	position: relative;
	display: inline-block;
	color: #000;
	transition: color .3s ease-out;
}
.container-2 a::before {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	height: 1px;
	width: 100%;
	background: #337AB7;
	transition: height .3s ease-out;
}

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

.container-2 a {

text-decoration: none;

position: relative;

display: inline-block;

color: #000;

transition: color .3s ease-out;

}

.container-2 a::before {

content: "";

position: absolute;

z-index: -1;

bottom: 0;

left: 0;

height: 1px;

width: 100%;

background: #337AB7;

transition: height .3s ease-out;

}

.container-2 a:hover {

color: #fff;

}

.container-2 a:hover::before {

height: 100%;

}

Ссылки имеют стиль display: inline-block; и если они не уместятся в 1 строку, то перенесутся на другую.

Вариант 3:

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

<a href="#link">ссылка</a>

</div>

.container-3 a {
	position: relative;
	text-decoration: none;
	color: #337AB7;
	display: inline-block;
}
.container-3 a::before, 
.container-3 a::after {
	content: '';
	position: absolute;
	transition: transform .5s ease;
	left: -4px;
	top: 0;
	width: calc(100% + 8px);
	height: 100%;
	border-style: solid;
	border-color: #337AB7;
	box-sizing: border-box;
}
.container-3 a::before {
	border-width: 1px 0 1px 0;
	transform: scaleX(0);
}
.container-3 a::after {
	border-width: 0 1px 0 1px;
	transform: scaleY(0);
}
.container-3 a:hover::before, 
.container-3 a:hover::after {
	transform: scale(1, 1);
}

.container-3 a {

position: relative;

text-decoration: none;

color: #337AB7;

display: inline-block;

}

.container-3 a::before,

.container-3 a::after {

content: '';

position: absolute;

transition: transform .5s ease;

left: -4px;

top: 0;

width: calc(100% + 8px);

height: 100%;

border-style: solid;

border-color: #337AB7;

box-sizing: border-box;

}

.container-3 a::before {

border-width: 1px 0 1px 0;

transform: scaleX(0);

}

.container-3 a::after {

border-width: 0 1px 0 1px;

transform: scaleY(0);

}

.container-3 a:hover::before,

.container-3 a:hover::after {

transform: scale(1, 1);

}

Ссылки имеют стиль display: inline-block; и если они не уместятся в 1 строку, то перенесутся на другую.

Вариант 4:

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

<a href="#link">ссылка</a>

</div>

.container-4 a {
	background: linear-gradient(to right, #BFE2FF 0%, #BFE2FF 5px, transparent 5px);
	background-repeat: repeat-x;
	background-size: 100%;
	color: #337AB7;
	padding-left: 10px;
	text-decoration: none;
}
.container-4 a:hover {
	background: linear-gradient(to right, #BFE2FF 0%, #BFE2FF 5px, transparent);
}

.container-4 a {

background: linear-gradient(to right, #BFE2FF 0%, #BFE2FF 5px, transparent 5px);

background-repeat: repeat-x;

background-size: 100%;

color: #337AB7;

padding-left: 10px;

text-decoration: none;

}

.container-4 a:hover {

background: linear-gradient(to right, #BFE2FF 0%, #BFE2FF 5px, transparent);

}

Вариант 5:

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

<a href="#link">ссылка</a>

</div>

.container-5 a {
	color: #337AB7;
	text-decoration: none;
	transition: color .2s ease;	
}
.container-5 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 #337AB7,
        0px 0px 50px #337AB7,
        0px 0px 50px #337AB7;
	}
}

.container-5 a {

color: #337AB7;

text-decoration: none;

transition: color .2s ease;

}

.container-5 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 #337AB7,

0px 0px 50px #337AB7,

0px 0px 50px #337AB7;

}

Вариант 6:

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

<a href="#link">ссылка</a>

</div>

.container-6 a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: #337AB7;
}
.container-6 a:hover {
	color: #000;
}
.container-6 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-6 a:hover::before{
	width: 100%;
}

.container-6 a {

position: relative;

display: inline-block;

text-decoration: none;

color: #337AB7;

}

.container-6 a:hover {

color: #000;

}

.container-6 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-6 a:hover::before{

width: 100%;

}

Ссылки имеют стиль display: inline-block; и если они не уместятся в 1 строку, то перенесутся на другую.

Вариант 7:

Последний пример срабатывает при клике (при наведении не смотрится) и использует JavaScript.

Для просмотра эффекта кликните на ссылку. Для наглядности добавим немного текста и еще одну ссылку подлиннее - более длинная ссылка, чтобы лучше рассмотреть эффект при клике.

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

<a href="#link">ссылка</a>

</div>

var anchors = document.querySelectorAll('.container-7 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)); }

var anchors = document.querySelectorAll('.container-7 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)

}

function r(a,b,c){ return parseFloat((Math.random()*((a?a:1)-(b?b:0))+(b?b:0)).toFixed(c?c:0)); }

Александр: 22.03.2022 в 18:38

Спасибо за ресурс.
Проблема из 2-го примера с z - индексом: при -1 фон проваливается и его не видно, при 0 всплывающий фон перекрывает текст ссылки....

Ответить
- Alexander: 23.03.2022 в 05:55
  Попробуйте добавить к самой ссылке z-index, например:
  
  .container-2 a { z-index: 10; }
  Ответить

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Вариант 5:

Вариант 6:

Вариант 7:

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

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

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