Все представленные эффекты подойдут как для кнопок, так и для блоков. Поскольку чаще анимированный эффект требуется для кнопок, то и большинство примеров адаптированы под них.
Эффекты при наведении на кнопку с линиями CSS
Красивый эффект при наведении на кнопки с линиями CSS, который подойдет скорее для темного фона сайта, но и в светлых оттенках смотрится хорошо. В любом случае, все цвета можно менять по желанию.
Пример
Button 1
Button 2
Button 3
HTML
<div class="line-btn line-btn-one"><span>Button 1</span></div>
<div class="line-btn line-btn-two"><span>Button 2</span></div>
<div class="line-btn line-btn-three"><span>Button 3</span></div>
CSS
/* Общие стили */
.line-btn {
width: 250px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
margin: 5em 0; /* Отступ кнопок */
color: #83bec5;
transition: all 0.5s;
position: relative;
}
/* Button 1 */
.line-btn-one span {
transition: all 0.3s;
}
.line-btn-one::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(131,190,197,0.5);
border-bottom-color: rgba(131,190,197,0.5);
transform: scale(0.1, 1);
}
.line-btn-one:hover span {
letter-spacing: 2px;
}
.line-btn-one:hover::before {
opacity: 1;
transform: scale(1, 1);
}
.line-btn-one::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(131,190,197,0.1);
}
.line-btn-one:hover::after {
opacity: 0;
transform: scale(0.1, 1);
}
/* Button 2 */
.line-btn-two span {
z-index: 2;
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.line-btn-two::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s;
border: 1px solid rgba(131,190,197,0.2);
background-color: rgba(131,190,197,0.1);
}
.line-btn-two::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.5s;
border: 1px solid rgba(131,190,197,0.2);
background-color: rgba(131,190,197,0.1);
}
.line-btn-two:hover::before {
transform: rotate(-45deg);
background-color: rgba(131,190,197,0);
}
.line-btn-two:hover::after {
transform: rotate(45deg);
background-color: rgba(131,190,197,0);
}
/* Button 3 */
.line-btn-three::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(131,190,197,0.1);
transition: all 0.3s;
}
.line-btn-three:hover::before {
opacity: 0 ;
transform: scale(0.5,0.5);
}
.line-btn-three::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border: 1px solid rgba(131,190,197,0.5);
transform: scale(1.2,1.2);
}
.line-btn-three:hover::after {
opacity: 1;
transform: scale(1,1);
}
Эффекты при наведении на кнопку с появлением тени CSS
Интересный эффект при наведении на кнопку с появлением тени CSS, подойдет как для кнопок, так и для блоков. С таким эффектом хорошо выделяются элементы сайта, цвета можно изменить по своему усмотрению.
Пример
HTML
<button class="neon-btn">Lorem Ipsum</button>
CSS
.neon-btn {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 2px solid #e74c3c;
cursor: pointer;
font-size: 0.950em;
line-height: 1;
margin: 15px;
padding: 10px 30px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
border-color: #527c82;
color: #fff;
box-shadow: 0 0 40px 40px #527c82 inset, 0 0 0 0 #527c82;
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.neon-btn:hover {
color: #527c82;
box-shadow: 0 0 10px 0 #527c82 inset, 0 0 10px 4px #527c82;
}
.neon-btn:hover, .neon-btn:focus {
outline: 0;
}
Эффекты при наведении на кнопки CSS
Эффекты при наведении на кнопки CSS подойдет для простых кнопок, так же кнопок в виде ссылки, для небольших блоков, для заголовков и других элементов сайта. Цвета можно менять по своему усмотрению.
Пример
HTML
<button class="slide-btns slide-left">Button 1</button>
<button class="slide-btns slide-right">Button 2</button>
<button class="slide-btns slide-top">Button 3</button>
<button class="slide-btns slide-bottom">Button 4</button>
<button class="slide-btns slide-square">Button 5</button>
<button class="slide-btns slide-ellipse">Button 6</button>
<button class="slide-btns slide-d-right">Button 7</button>
<button class="slide-btns slide-d-left">Button 8</button>
<button class="slide-btns slide-spin">Button 9</button>
CSS
/* Общие стили для всех кнопок */
.btn-different{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.slide-btns {
position: relative;
color: #fff;
font-size: 0.950em;
text-transform: uppercase;
background: #83bec5;
border: 1px solid #527c82;
padding: 10px 30px;
margin: 15px;
z-index: 1;
overflow: hidden;
}
.slide-btns:hover {
color: #83bec5;
text-decoration: none;
}
.slide-btns::after {
content: "";
background: #527c82;
position: absolute;
z-index: -1;
display: block;
}
.slide-btns[class^="slide"]::after {
transition: all 0.60s;
}
.slide-btns[class^="slide"]:hover::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all 0.60s;
}
/* Button 1 Перекрывается слева */
.slide-btns.slide-left::after {
top: 0;
bottom: 0;
left: -100%;
right: 100%;
}
/* Button 2 Перекрывается справа */
.slide-btns.slide-right::after {
top: 0;
bottom: 0;
left: 100%;
right: -100%;
}
/* Button 3 Перекрывается сверху */
.slide-btns.slide-top::after {
left: 0;
right: 0;
top: -100%;
bottom: 100%;
}
/* Button 4 Перекрывается снизу */
.slide-btns.slide-bottom::after {
left: 0;
right: 0;
top: 100%;
bottom: -100%;
}
/* Время при наведении для оставшихся кнопок */
.slide-btns[class^="slide"]::after {
transition: all 0.50s ease;
}
.slide-btns[class^="slide"]:hover::after {
transition: all 0.50s ease-out;
}
/* Button 5 Перекрывается квадрат */
.slide-btns.slide-square::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0);
}
.slide-btns.slide-square:hover::after {
transform: scale(1, 1);
}
/* Button 6 Перекрывается элипс */
.slide-btns.slide-ellipse::after {
border-radius: 50%;
left: -50%;
right: -50%;
top: -150%;
bottom: -150%;
line-height: 10em;
transform: scale(0, 0);
}
.slide-btns.slide-ellipse:hover::after {
transform: scale(2, 2);
}
/* Button 7 Перекрывается диагонально направо */
.slide-btns.slide-d-right::after {
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(-45deg) scale(0, 1);
}
.slide-btns.slide-d-right:hover::after {
transform: skewX(-45deg) scale(2, 2);
}
/* Button 8 Перекрывается диагонально налево */
.slide-btns.slide-d-left::after {
left: -20%;
right: -20%;
top: 0;
bottom: 0;
transform: skewX(45deg) scale(0, 1);
}
.slide-btns.slide-d-left:hover::after {
transform: skewX(45deg) scale(2, 2);
}
/* Button 9 Перекрывается спиралью */
.slide-btns.slide-spin::after {
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0) rotate(-180deg);
}
.slide-btns.slide-spin:hover::after {
transform: scale(1, 1) rotate(0deg);
}
Эффект при наведении с бликом для кнопки CSS
Эффект при наведении с бликом для кнопки CSS подойдет для кнопок, в виде ссылки, для небольших блоков, для заголовков и других деталей. Кода не много, цвет кнопки можно менять по своему усмотрению.
Пример
HTML
<a href="#" title="" class="shine-button">Lorem Ipsum</a>
CSS
.shine-button {
text-decoration: none;
display: inline-block;
padding: 10px 30px;
margin: 15px 0;
position: relative;
overflow: hidden;
border: 1px solid #527c82;
background: #83bec5;
color: #fff !important;
font-size: 0.950em;
text-transform: uppercase;
transition: .2s ease-in-out;
}
.shine-button:before {
content: "";
background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .5));
height: 60px;
width: 50px;
position: absolute;
top: 0px;
left: -80px;
transform: skewX(-45deg);
}
.shine-button:hover {
background: #83bec5;
color: #fff !important;
}
.shine-button:hover:before {
left: 100%;
transition: .5s ease-in-out;
}
.shine-button:focus {
background: #83bec5;
color: #fff !important;
outline: none;
}