Изменение фона и цвета ссылки 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; /* Цвет фона */
}