Содержание страницы
Кнопки cssКнопки css - большая подборка из 142 анимированных кнопок в примерах, выполненных только на css.

Кнопки css имеют классные эффекты при нажатии и наведении. Красивая анимация кнопок будет стильно отображаться на странице html.

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

Нажмите на кнопку, чтобы получить код CSS.

Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка


Нажмите на кнопку, чтобы получить код CSS.

Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Показать ещё кнопки


Нажмите на кнопку, чтобы получить код CSS.

Большая кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка


Нажмите на кнопку, чтобы получить код CSS.

Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка
Кнопка

Дата публикации: 28.07.2018
Комментарии
Вадим
1 августа 2018 10:27
Вадим
Здравствуйте!
Я с проблемой по кнопке из серии Кнопки css с анимацией: на локалке выводится и работает кнопка отлично, а на сайте при наведение ничего не происходит.
Единственное что я изменил, это добавил в ваш код css для кнопки свой дополнительный блок.
Подскажите, что нужно добавить в стили для моего div, чтобы кнопка заработала. Спасибо!
Admin
1 августа 2018 12:16
Admin
Добрый день!
Скорее всего эта проблема связана с параметром z-index, попробуйте для вашего div добавить z-index:0; в css.
Вадим
2 августа 2018 08:42
Вадим
Благодарю, кнопка заработала.
И попутно, у меня на сайте в кнопке css ссылка при наведении и нажатии приобретает совершенно другой цвет и появляется подчёркивание.
Я понимаю, что это связано с моими правилами на сайте в стилях, а как это исправить?
И спасибо за качественные примеры кнопок на css.
Admin
2 августа 2018 09:29
Admin
Вам необходимо сделать переопределение параметров для ссылок в кнопке.
То есть задать новые свойства и прописать обязательно ниже существующих записей.
К примеру, ваша кнопка на css имеет такой код:
<a href="#" class="bucn_3_2s">Кнопка</a>
и вам нужно в стилях прописать:
cssCOPY
<style> .bucn_3_2s:hover,.bucn_3_2s:active,.bucn_3_2s:focus { color: #000; /* Указываете нужный цвет */ text-decoration: none; /* Убираете подчёркивание */ } </style>
Натали
3 августа 2018 12:02
Натали
Спасибо за крутую подборку кнопок:))
Подскажи пожалуйста, как в примерах кнопок на css с эффектом мигания при наведении убрать эффект мигания?
В этом варианте есть нужная расцветка кнопки для моего сайта и я хочу без всяких эффектов.
Заранее, благодарна!
Admin
3 августа 2018 12:38
Admin
Удалите правило в css @-webkit-keyframes с его значениями, и удалите для класса .wsa_7s:hover эту запись:
-webkit-animation:glow 1s infinite ease-in-out;cursor:pointer;
Эффект при наведении для кнопки пропадёт.
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!