CSS эффекты для ссылок
Коллекция эффектов на CSS для подчеркивания ссылок и просто для ссылок. Выбираете понравившийся эффект, копируете CSS, вставляете к себе на сайт и у вас такой же эффект. Часто люди не обращаю внимания на то как оформлены у них подчеркивания у ссылок или просто ссылки, а на самом деле можно сделать крайне няшные эффекты. Самые вкусные стили внизу, это плавное появление подчеркивания слева на право. Оно простое, понятное и плавное. Так же есть и сложные стили. Пишите внизу в коментариях какой бы эффект вы бы хотели видеть, и я добавлю его.
Table of effects:
- Без подчеркивания совсем
- Простое классическое подчеркивание
- Двойное подчеркивание
- Двойное подчеркивание, просто другим методом
- Точечное подчеркивание
- Подчеркивание черточками
- Подчеркивание ссылок определенным цветом
- Изменение цвета фона ссылки
- Подчеркивание слева направо
- Появление легкого тумана сзади ссылки при наведении
- Добавление тени при наведении на ссылку
- Слева направо анимированное подчеркивание
- Справа налево анимированное подчеркивание
- Верхнее плавное подчеркивание
- Подчеркивание из центра ссылки
- Эффект пульсации для ссылок
Без подчеркивания совсем
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t1 a {
text-decoration: none;
border-bottom: 0px;
}
Простое классическое подчеркивание
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t2 a {
text-decoration: underline;
}
Двойное подчеркивание
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t3 a {
text-decoration: underline double;
}
Двойное подчеркивание, просто другим методом
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t4 a {
text-decoration: none;
border-bottom: 3px double;
}
Точечное подчеркивание
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t5 a {
text-decoration: none;
border-bottom: 1px dotted;
}
Подчеркивание черточками
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t6 a {
text-decoration: none;
border-bottom: 1px dashed;
}
Подчеркивание ссылок определенным цветом
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t7 a{
text-decoration: none;
}
#t7 a:nth-child(1) {
border-bottom: 2px solid red;
}
#t7 a:nth-child(2) {
border-bottom: 2px solid green;
}
#t7 a:nth-child(3) {
border-bottom: 2px solid blue;
}
Изменение цвета фона ссылки
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t8 a{
text-decoration: none;
padding: 5px;
transition: 0.5s;
color: #990000;
transition: color .2s ease-out, background 0.5s ease-in;
}
#t8 a:hover{
color: #FFFFFF;
background-color: #336699;
text-shadow: none;
}
Подчеркивание слева направо
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t9 a{
color: #FFFFFF;
font-family: 'PT Sans Narrow';
background-color: #37A1E8;
text-shadow: none;
}
#t9 a:hover{
padding-left: 25px;
background-color: #37A1E8;
transition: all 0.5s;
}
Появление легкого тумана сзади ссылки при наведении
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t10 a:hover{
text-shadow: 0 0 15px #37A1E8;
transform: scale(1.05);
transition: all 0.5s;
}
Добавление тени при наведении на ссылку
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t11 a:hover{
text-shadow: 2px 2px 7px #777;
transition: all 0.5s;
}
Слева направо анимированное подчеркивание
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t12 a {
text-decoration: none;
position: relative;
}
#t12 a::before {
content: '';
bottom: 0;
right: 0;
position: absolute;
width: 0%;
height: 2px;
background-color: #F03E40;
transition: 0.2s;
}
#t12 a:hover:before {
width: 100%;
left: 0;
}
Справа налево анимированное подчеркивание
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t13 a {
text-decoration: none;
position: relative;
}
#t13 a::before {
content: '';
bottom: 0;
right: 0;
position: absolute;
width: 0%;
height: 2px;
background-color: #F03E40;
transition: 0.2s;
}
#t13 a:hover:before {
width: 100%;
}
Верхнее плавное подчеркивание
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t14 a {
text-decoration: none;
position: relative;
}
#t14 a::before {
content: '';
top: 0;
right: 0;
position: absolute;
width: 0%;
height: 2px;
background-color: #F03E40;
transition: 0.2s;
}
#t14 a:hover:before {
width: 100%;
left:0;
}
Подчеркивание из центра ссылки
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t15 a {
text-decoration: none;
position: relative;
}
#t15 a::before {
content: '';
bottom: 0;
left: 0;
position: absolute;
width: 100%;
height: 2px;
background-color: #F03E40;
transition: 0.2s;
transform: scaleX(0);
}
#t15 a:hover:before {
transform: scaleX(1);
}
Эффект пульсации для ссылок
Пример:
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
CSS код:
#t16 a {
text-decoration: none;
position: relative;
}
#t16 a::before {
content: '';
bottom: 0;
right: 0;
position: absolute;
width: 0%;
height: 100%;
background-color: #F03E40;
transition: 0.2s;
}
#t16 a:hover:before {
width: 100%;
left: 0;
background-color: #F03E4022;
}
Comment, please, and ask effect you need, I will add it