Кнопки CSS эффекты при наведении и нажатии

Здесь не про дизайн. Здесь готовый код различных эффектов с подробными комментариями.

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

Кое-что про дизайн в статье Блок с закруглёнными углами и тенью. Эллипс

Нужно просто поиграть с цифрами в свойствах border-radius и box-shadow, поэкспериментировать со свойствами gradient и background

Все кнопки, показанные ниже, действующие. Выбирайте вариант, который вам понравится.

Варианты кнопок будут добавляться по мере создания.

Чтоб быстро увидеть код, понравившейся кнопки, щёлкните по ссылке «Код», рядом с кнопкой.

При наведении:

Градиент Код

Наплывание Код

Обесцвечивание Код

Всплывание Код

Искажение Код

Многоцветная рамка Код

3D кнопка Код

Появление текста вращением Код

Появление текста из глубины Код

Появление картинки Код

При нажатии:

Красная кнопка Код

 

Кнопка с индикатором Код

 

Клавиша Код

 

Градиент


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
.one { /* Внешний вид кнопки */
color: #524E49; /* Цвет текста */
background: #fdeaa8 ; /* Фоновый цвет */
padding: 10px; /* Минимальный отступ текста от границ кнопки. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Радиус закругления уголков */
box-shadow: 0px 1px 3px; /* Тень */
}
.one:hover { /* Преображение при наведении */
background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#777); /* Радиальный градиент, переход цвета от центра к краям */
}
</style>
</head>
<body>

<button class="one" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Наплывание


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
.two { /* Внешний вид кнопки */
color: #524E49; /* Цвет текста */
background: #fdeaa8 ; /* Фоновый цвет */
padding: 10px; /* Внутренний отступ текста от границ блока. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Радиус закругления уголков */
box-shadow: 0px 1px 3px; /* Тень */
position: relative; /* Относительное позиционирование, для установки абсолютного позиционирования для наплывания */
}
.two:before { /* Псевдо элемент для создания наплывания */
content:''; /* Обязательное свойство псевдоэлемента :before */
position: absolute; /* Позиционируем абсолютно */
top: 0px; /* Позиция по границам блока */
left: 0px;
width: 100%; /* Ширина по границам кнопки */
height: 0px; /* Высота 0, поэтому невиден */
background: rgba(148,144,143,0.4); /* Фоновый цвет наплывания */
border-radius: 5px; /* Радиус уголков */
transition: all 0.5s ease-out; /* Анимация. Движение. Трансформируются все свойства (all) в течении 0.5 секунды, быстро начинается и к концу замедляется (ease-out) */
}
.two:hover:before { /* При наведении */
height: 42px; /* Высота наплывания становится равной высоте кнопки */
}
</style>
</head>
<body>

<button class="two" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Обесцвечивание


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
.three { /* Внешний вид кнопки */
color: #524E49; /* Цвет текста в кнопке */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Отступ текста от границ - определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
}
/* Меняем внешний вид при наведении */
.three:hover { /* Добавляем псевдокласс :hover */
background: rgba(0,0,0,0);/* Меняем фоновый цвет */
color: #3a7999; /* Меняем цвет текста */
box-shadow: inset 0 0 0 3px #3a7999; /* Меняем тень */
}
</style>
</head>
<body>
<button class="three" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Всплывание


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.elementy {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Внутренний отступ текста от границ */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию (перемещение). Для всех действий (all) Время перемещения (0.8 сек.) Направление перемещения (cubic-bezier(0.165, 0.84, 0.44, 1)) */
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Эффект при наведении */
.elementy:hover { /* Добавляем псевдокласс :hover */
/* Задаём расстояние, на которое сместится кнопка */
-webkit-transform: translate(10px);
transform: translate(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) /* Изменяем тень */
}
</style>
</head>
<body>
<button class="elementy" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Искажение


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.five {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Внутренний отступ */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию. Для всех элементов (all), время анимации (500ms) */
transition: all 500ms ease-out;
}
/* Эффект при наведении */
.five:hover { /* Добавляем псевдокласс :hover */
transform: skew(10deg);/* Задаём действие анимации - отклонение на 10 градусов */
}
</style>
</head>
<body>
<button class="five" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Разноцветная рамка


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.six {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Отступ текста от границ. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию. Для всех элементов (all), время появления рамки (500ms), быстро начинается потом замедляется (ease-out) */
transition: all 500ms ease-out;
}
/* Эффект при наведении */
.six:hover { /* Добавляем псевдокласс :hover */
/* Используем несколько теней разного цвета и размера */
box-shadow: 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00;
}
</style>
</head>
<body>
<button class="six" onclick="location.href='#';">Кнопка</button>
</body>
</html>

3D кнопка


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.seven {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Отступ текста от границ */
font-size: 20px; /*Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
position: relative; /* Задаём относительное позиционирование */
transition: all 500ms ease-out; /* Задаём анимацию с временем выполнения 500ms */
transform-style: preserve-3d; /* Трансформация показывается как 3D */
}
/* Создаём псевдо элемент - верхняя грань кнопки */
.seven:after { /* Добавляем псевдо элемент :after */
content: 'Кнопка'; /* Текст в псевдо элементе */
position: absolute; /* Позиционируем абсолютно, относительно основного блока */
top: -50%;
left: 0px;
width: 100%; /* Ширина */
background: #fdeaa8; /* Фоновый цвет */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
transform-origin: bottom; /* Точка, относительно которой будет выполнятся вращение */
transform: rotateX(90deg); /* Размещаем в горизонтальной плоскости, в результате чего псевдо элемент не виден */
}
/* Эффект при наведении */
.seven:hover { /* Добавляем псевдо класс :hover */
transform-origin: bottom; /* Определяем точку, относительно которой происходит вращение */
transform: rotateX(-90deg); /* Поворачиваем на 90 градусов */
}
</style>
</head>
<body>
<button class="seven" onclick="location.href='#';">Кнопка</button>
</body>
</html>

Появление вращающегося текста


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.eight {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); /* Фоновый цвет - радиальный градиент */
width: 90px; /* Ширина */
height: 40px; /* Высота */
padding: 10px; /* Внутренний отступ */
border-radius: 5px; /* Закругление углов */
box-shadow: 0px 2px 4px; /* Тень */
display: inline-block; /* Встроенный элемент */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования других элементов */
text-decoration: none; /* Убираем подчёркивание текста */
}
/* Создаём псевдоэлемент - текст */
.eight:after { /* Добавляем псевдоэлемент :after */
width: 80%; /* Ширина относительно родительского блока */
color: red; /* Цвет текста */
font-family: 'Lucida Console'; /* Шрифт текста */
font-size: 18px; /* Размер текста */
text-align: center; /* Выравнивание по центру */
content: attr(title); /* Текс берётся из атрибута title */
display: block; /* Блочный элемент */
opacity: 0; /* Невидимый */
position: absolute; /* Позиционируется абсолютно */
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%; /* Точка от которой происходит анимация - центр */
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out; /* Анимация. Для всех элементов, время - 550ms, начинается и заканчивается медленно */
-webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
transform: scale(0) rotate(-360deg) translateY(-50%); /* Вращение на 360 градусов */
z-index: 3; /* Поверх всех элементов */
}
/* Эффект при наведении */
.eight:hover:after { /* Добавляем псевдокласс :hover */
opacity: 1; /* Видимый */
-webkit-transform: scale(1) rotate(0deg) translateY(-50%);
transform: scale(1) rotate(0deg) translateY(-50%); /* Точка трансформации - центр */
}
</style>
</head>
<body>
<button class="eight" title="knopka" ></button>
</body>
</html>

Появление текста из глубины


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.nine {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); /* Фоновый цвет - радиальный градиент */
width: 90px; /* Ширина */
height: 40px; /* Высота */
padding: 10px; /* Внутренний отступ */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 2px 4px; /* Тень */
display: inline-block; /* Встроенный элемент со свойствами блочного */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования появляющегося текста */
text-decoration: none; /* Убираем подчёркивание */
}
/* Создаём псевдоэлемент для появляющегося текста */
.nine:after {
width: 80%; /* Ширина элемента */
color: red; /* Цвет текста */
font-family: 'Lucida Console'; /* Шрифт текста */
content: attr(title); /* Текст берётся из атрибута title */
display: block; /* Блочный элемент */
font-size: 18px; /* Размер текста */
text-align: center; /* Выравнивание текста по центру */
opacity: 0; /* Невидимый */
position: absolute; /* Позиционируем абсолютно по центру родительского блока */
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%; /* Точка начала трансформации по центру */
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%); /* Масштаб 0 и отодвигаем в глубину */
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out; /* Анимация. Для всех элементов (all), время действия 550ms, медленно начинается и заканчивается (ease-in-out) */
z-index: 3; /* Поверх всех элементов */
}
/* Эффект при наведении */
.nine:hover:after {
opacity: 1; /* Видимый */
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%); /* Масштаб 1 х 1 (scale(1)), расположение по центру в глубине */
}
</style>
</head>
<body>
<button class="nine" title="knopka" ></button>
</body>
</html>

Появление картинки


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.ten {
color: #524E49; /* Цвет текста */
background: #F7E09C; /* Фоновый цвет */
padding: 10px 35px; /* Внутренний отступ. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
position: relative; /* Относительное позиционирование для абсолютного позиционирования картинки */
}
/* Картинка */
.ten img {
position: absolute; /* Позиционируем абсолютно */
top: 7px; /* По середине */
left: -30px; /* Выносим за пределы кнопки */
transition: all 200ms ease; /* Анимация появления. Время анимации 200 ms */
}
/* Эффект при наведении */
.ten:hover img {
left: 5px; /* Возвращаем картинку в кнопку */
}
</style>
</head>
<body>
<!--Картинка размещается внутри кнопки-->
<button class="ten" onclick="location.href='#';"><img src="images/Animation.gif">Кнопка</button>
</body>
</html>

Красная кнопка


CSS
.tower {
position: relative; /* Оболочка с относительным позиционированием, для абсолютного позиционирования других элементов */
}
/* Внешний вид */
.round {
position: absolute; /* Позиционируем абсолютно по оболочке. В этом случае позиции можно не указывать */
width: 70px; /* Ширина */
height: 70px; /* Высота */
border: 4px solid hsl(5, 40%, 70%); /* Рамка */
border-radius: 50%/50%; /* Делаем рамку круглой */
background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%);
background: -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%); /* Фоновый цвет - линейный градиент. Цвет задан в формате hsl, но можно задать в любом доступном в веб формате */
сursor: pointer; /* Курсор в виде ладошки */
transform: rotate(30deg); /* Поворачиваем на 30 градусов */
}
/* Эффект при нажатии */
.round:active { /* Добавляем псевдокласс :active */
width: 69px; /* Уменьшаем ширину */
height: 69px; /* Уменьшаем высоту */
box-shadow: 0 0 hsl(5, 60%, 60%); /* Уменьшаем тень */
border: 3px solid hsl(5, 40%, 70%); /* Уменьшаем толщину рамки */
background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%);
background: -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%); /* Изменяем значения линейного градиента */
}
HTML
<div class="tower">
<!--Вместо кнопки (buttom) используется ссылка (a)-->
<a class="round" href="*"></a>
</div>

Кнопка с индикатором


CSS
/* Оболочка */
.switch {
width: 70px; /* Ширина */
height: 70px; /* Высота */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования других элементов */
cursor: pointer; /* Курсор в виде ладошки */
}
/* Внутренний круг */
.dot {
position: absolute; /* Позиционируем абсолютно относительно оболочки */
top: 7%;
left: 7%;
width: 70px; /* Ширина */
height: 70px; /* Высота */
border-radius: 50%; /* Делаем круг */
background: hsl(0, 0%, 90%); /* Фоновый цвет */
box-shadow: /* Многослойная тень, наружная и внутренняя */
0 3px 5px hsl(0, 0%, 75%),
inset 0 1px 0 hsl(0, 0%, 95%),
inset 0 -5px 5px hsl(0, 0%, 75%),
inset 0 5px 5px hsl(0, 0%, 95%)
;
}
/* Наружный круг */
.circ {
position: absolute; /* Позиционируем абсолютно относительно оболочки по центру внутреннего */
top: 0;
left: 0;
width: 82px; /* Ширина */
height: 82px; /* Высота */
border-radius: 50%; /* Делаем круг */
background: linear-gradient(#ccc, #fff);
background: -webkit-linear-gradient(#ccc, #fff); /* Фоновый цвет - линейный градиент */
box-shadow: /* многослойная внутренняя тень */
inset 0 2px 1px hsl(0, 0%, 75%),
inset 0 -2px hsl(0, 0%, 75%)
;
}
/* Индикатор - псевдоэлемент */
.switch .dot:before {
content: "";
position: absolute; /* Позиционируем абсолютно по центру */
left: 40%;
top: 40%;
width: 20%; /* Ширина */
height: 20%; /* Высота */
border-radius: 50%; /* Делаем круг */
background: radial-gradient(#fff, #333);
background: -webkit-radial-gradient(#fff, #333); /* Фоновый цвет - радиальный градиент */
}
/* Эффект при нажатии */
.switch:active .dot:before {
content: "";
background: radial-gradient(#fff, #02A829);
background: -webkit-radial-gradient(#fff, #02A829); /* Меняем цвет индикатора */
}
.switch:active .dot {
background: radial-gradient(#fff, #ccc);
background: -webkit-radial-gradient(#fff, #ccc); /* Меняем фоновый цвет внутреннего круга */
width: 69px; /* Уменьшаем ширину внутреннего круга */
height: 69px; /* Уменьшаем высоту внутреннего круга */
}
HTML
<!--Оболочка-->
<div class="switch">
<!--Наружный круг-->
<div class="circ">
<!--Внутренний круг-->
<span class="dot"></span>
<!--Ссылка для адреса перехода-->
<a href=""></a>
</div>
</div>

Клавиша


CSS
.switch1 {
width: 75px;
height: 45px;
position: relative;
cursor: pointer;
}
.dot1 {
position: absolute;
top: 7%;
left: 7%;
display: block;
width: 75px;
height: 45px;
border-radius: 7px;
background: linear-gradient(hsl(0, 0%, 90%), hsl(0, 0%, 96%));
box-shadow: -3px 5px hsl(0, 0%, 75%),
1px -2px hsl(0, 0%, 75%),
inset 0 0px 5px hsl(0, 0%, 95%),
inset 0 -1px 5px hsl(0, 0%, 95%)
;
z-index: 1;
}
.circ1 {
display: block;
position: absolute;
width: 87px;
height: 57px;
top: 0;
left: 0;
background: linear-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
box-shadow:
inset 0 1px 1px hsl(0, 0%, 95%),
inset 0 -1px 1px hsl(0, 0%, 95%)
;
}
.dot1:before {
content: "Enter";
color: hsl(0, 0%, 60%);
position: absolute;
left: 20%;
top: 15%;
font-size: 20px;
}
.switch1:active .dot1:before {
content: "Enter";
}
.switch1:active .dot1 {
background: radial-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
box-shadow: -2px 4px hsl(0, 0%, 75%),
0px -1px hsl(0, 0%, 75%),
inset 0 1px 2px hsl(0, 0%, 95%),
inset 0 -1px 2px hsl(0, 0%, 95%)
;
}
HTML
<div class="switch1">
<div class="circ1">
<a class="dot1"></a>
</div>
</div>

Не во всех кнопках свойство transform указано с необходимыми перфиксами, так что не забудьте их добавить, по примеру десятой кнопки.

Желаю творческих успехов.

Текст появляющийся на изображениях CSS < < < В раздел > > > Анимация для шапки сайта

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

4 комментария на «Кнопки CSS эффекты при наведении и нажатии»

  1. stariс говорит:

    Кнопка (button) и ссылка (<a></a>) строчные элементы. Чтоб расположить их друг под другом есть два варианта. Можно вставить между ними тег <br> (перенос строки), но таким способом кнопки можно расположить только слева, т.е их нельзя будет равномерно подвинуть на странице, или такое действие потребует начительных усилий.

    И можно заключить кнопки в блочные теги (<p></p> или <div></div>). Блочные теги всегда начинаются с новой строки. Блочные элементы можно двигать (позиционировать) как угодно.

    Можно заключить все кнопки в блок div, а уже внутри этого блока заключить каждую кнопку в блок p (абзац), тогда все они расположаться друг под другом и двигать (позиционировать) их можно будет сразу все вместе.

  2. Roman говорит:

    Здравствуйте!
    Подскажите пожалуйста как сделать так, чтобы кнопки распологались одна под другой.
    Заранее спасибо.

  3. stariс говорит:

    Ссылка не блочный элемент. Её можно засунуть в любое место тега body. Если у вас проблемы с размещением кнопок — спросите поподробнее, разберёмся.

  4. Александр говорит:

    Здравствуйте! скажите пожалуйста, в какое место кода, нужно вставить ссылку которая будет вести на сторонний сайт?
    Спасибо за разъяснение!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *