Эффекты при наведении на текст CSS

Подборка эффектов при наведении на текст пригодиться для украшения сайта, а так же чтобы выделить нужные элементы, например, подчеркивание текста, заголовков, выделение цветом и многое другое.

При наведении на текст меняется цвет CSS

Эффект изменения цвета при наведении необходим, когда нужно выделить определенный фрагмент текста или абзац. Этот эффект так же подойдет и для ссылки.

Пример

Lorem Ipsum

HTML


<p class="change-text">Lorem Ipsum</p>
      

CSS


p.change-text{
  color: #f66d52; /* Цвет текста */
  font-size: 2em; /* Размер текста */
  font-weight: bold;
  padding: 20px 0px;
  text-transform: uppercase;
  line-height: 1;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease; 
}
p.change-text:hover{
  color: #5265f6; /* Меняем цвет текста */
}
     

Зачеркнутый текст CSS

Эффект при наведении с зачеркнутым текстом подойдет для того, чтобы выделить фрагмент текста или обратить внимание пользователя на него. Цвет текста и линии одинаковый.

Пример

Lorem Ipsum

HTML


<p class="line-through">Lorem Ipsum</p>
      

CSS


p.line-through{
  color: #f66d52; /* Цвет текста */
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1em;
  text-decoration:none; 
}
p.line-through:hover{
  text-decoration:line-through; /* Добавляем зачеркивание */
}
     

Зачеркнутая ссылка или текст при наведении другим цветом CSS

Эффект зачеркивания ссылки при наведении пригодится, когда ссылку нужно выделить в тексте, а также для меню на сайте. Такой эффект также можно применить и к тексту. Цвет зачёркивающей линии можно менять по своему усмотрению.

Пример

<!— Ссылка —> <!— Текст —>

Lorem Ipsum

HTML


<!-- Ссылка -->
<div class="crossed"><a href="#" class="crossed-link" title="">Lorem Ipsum</a></div>
<!-- Текст -->
<div class="crossed"><p class="crossed-text">Lorem Ipsum</p></div>
      

CSS


/* Ссылка */
a.crossed-link {
  color: #f66d52; /* Цвет сылки */
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1em;
  position: relative;
  display: inline-block;
}
a.crossed-link:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px; /* Высота зачеркивающей линии */
  background: #666; /* Цвет зачеркивающей линии */
  top: 45%;
  animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover a.crossed-link:before {
  animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

/* Текст */
p.crossed-text{
  color: #ffa000; /* Цвет текста */
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1em;
  position: relative;
  display: inline-block;
}
p.crossed-text:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px; /* Высота зачеркивающей линии */
  background: #666; /* Цвет зачеркивающей линии */
  top: 45%;
  animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover p.crossed-text:before {
  animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

/* Анимация */
@keyframes in {
  0% {
  width: 0;
  left: 0;
  right: auto;
  }
  100% {
  left: 0;
  right: auto;
  width: 100%;
  }
}
@keyframes out {
  0% {
  width: 100%;
  left: auto;
  right: 0;
  }
  100% {
  width: 0;
  left: auto;
  right: 0;
  }
}
@keyframes show {
  0% {
  opacity: 0;
  transform: translateY(-10px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}
     

Появление тени для текста при наведении CSS

Эффект появления тени для текста подойдет для того, чтобы выделить определенный фрагмент текста на сайте, можно добавить и смену цвета текста,каак показано в примере, чтобы элементы стали более разнообразными и интересными для пользователя.

Пример

Lorem Ipsum

HTML


<p class="shadow-text">Lorem Ipsum</p>
      

CSS


.shadow-text{
  color: #f66d52; /* Цвет  текста */
  font-size: 2em; /* Размер  текста */
  font-weight: bold;
  padding: 20px 0px;
  text-transform: uppercase;
  line-height: 1;
  -webkit-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.shadow-text:hover{
  color: #ffa000; /* Меняем цвет текста */
  -webkit-text-shadow: 2px 2px 2px #000;
  -moz-text-shadow: 2px 2px 2px #000;
      text-shadow: 2px 2px 2px #000;
}
     

Анимация с подчёркивающей и исчезающей линией у ссылки CSS

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

Пример

HTML


<a href="#" class="underline-one">Lorem Ipsum</a>
      

CSS


.underline-one {
	color: #00bfff; /* Цвет обычной ссылки */
    position: relative;
    cursor: pointer;
    text-decoration: none; /* Убираем подчеркивание */
}
.underline-one:after {
	content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: -3px;
    width: 0;
    height: 2px; /* Высота линии */
    background-color: black; /* Цвет подчеркивания при исчезании линии*/
    transition: width 0.5s; /* Время эффекта */
}

.underline-one:hover:after {
	content: "";
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: -3px;
    height: 2px; /* Высота линии */
    background-color: red; /* Цвет подчеркивания при появлении линии*/
    transition: width 0.5s;  /* Время эффекта */
}
     

Анимация с подчёркивающей линией у ссылки CSS

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

Пример

HTML


<div class="link-ease-in-out">
    <a href="#" title="Lorem Ipsum">Lorem Ipsum</a>
</div>
      

CSS


.link-ease-in-out a {
    display: inline-block;
    color: #00bfff; /* Цвет обычной ссылки */
    line-height: 1;
    text-decoration: none; /* Убираем подчеркивание */
    cursor: pointer;
}
.link-ease-in-out a:after {
    background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */
    display: block;
    content: "";
    height: 2px; /* Высота линии */
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.link-ease-in-out a:hover:after,
.link-ease-in-out a:focus:after {
    width: 100%;
}
     

Изменение фона и цвета ссылки CSS

Этот эффект при наведении одинаково подойдет как для ссылки, так и для того, чтобы выделить фрагмент текста. Его можно использовать, чтобы привлечь внимание посетителей и сделать свой сайт еще более интересным.

Пример

Lorem Ipsum

HTML


<p>Lorem Ipsum</p>
      

CSS


p {
    color: #5a5a5a; /* Цвет текста */
    background: #ffc; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
    transition: 1s linear; /* Время изменения */
}
p:hover {
    color: #fff; /* Цвет текста */
    background: #f66d52; /* Цвет фона */
}
     

Увеличение текста при наведении CSS

Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.

Пример

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

HTML


<p class="gain-left">Lorem Ipsum</p>
<p class="gain-center">Lorem Ipsum</p>
<p class="gain-right">Lorem Ipsum</p>
      

CSS


/* Текст слева */
.gain-left {
  transition: 1s; /* Время эффекта */
  text-align: left; 
}
.gain-left:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст по центру */
.gain-center{
  transition: 1s; /* Время эффекта */
  text-align: center; 
}
.gain-center:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}
/* Текст справа */
.gain-right {
  transition: 1s; /* Время эффекта */
  text-align: right; 
}
.gain-right:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
}
     

Как добавить линию к заголовку с помощью :before и :after

Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.

Пример

Lorem Ipsum

HTML


<h3 class="title-example">Lorem Ipsum</h3>
      

CSS


h3.title-example{
    font-size: 1em; /* Размер шрифта */
    color: #5a5a5a; /* Цвет заголовка */
    text-align: center; /* Текст по центру */
}
/*  CSS код для линии над заголовком */
h3.title-example:before {
    content: '';
    display: block;
    height: 1px; /* Высота линии */
    background: #f66d52; /* Цвет линии */
    width: 150px; /* Ширина линии до наведения */
    margin: 0 auto 10px; /* Отступ с боков по центру и снизу */
	transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:before {
    width: 250px; /* Ширина линии при наведении */
	transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}
/*  CSS код для линии под заголовком */
h3.title-example:after {
    content: '';
    display: block;
    height: 1px; /* Высота линии */
    background: #f66d52; /* Цвет линии */
    width: 150px; /* Ширина линии до наведения */
    margin: 10px auto 0; /* Отступ с боков по центру и сверху */
	transition: 1s; /* Время, за которое линия возвращается после наведения */
}
h3.title-example:hover:after {
    width: 250px; /* Ширина линии при наведении */
	transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */
}