10 бесплатных сниппетов CSS для создания красивых кнопок

Анимированная кнопка «Скачать» в виде облака

Скачать / Посмотреть на CodePen

(далее…)

Контейнер-крышка «cap»

Контейнер-крышка будет закрывать кнопку, если страница помещается в окно браузера и скроллинга нет.

  1. HTML:
  2. CSS:
    .cap { background-color: цвет+фона+сайта; height: 32px; width: 32px; position: absolute; bottom: 10px; right: 10px; z-index: 2; }
background-color: цвет+фона+сайта;
устанавливаем фон блока таким же, как и фон сайта.
height: 32px; width: 32px;
высота и ширина блока соответственно (их берём также исходя из размеров изображения кнопки или чуть больше).
position: absolute; bottom: 10px; right: 10px;
делаем блок не фиксированным как предыдущий, а абсолютно позиционированным и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
z-index: 2;
помещаем блок на 2-ой уровень, то есть выше блока с кнопкой.

Красивая анимация для кнопки «Скачать» с цифровым индикатором прогресса

Скачать / Посмотреть на CodePen

(далее…)

Hexagon Button: при наведении кнопка превращается в шестиугольник, а при клике обратно становится прямоугольной формы

Скачать / Посмотреть на CodePen

(далее…)

Анимированная кнопка «отправить»: при наведение появляется конверт, который при клике улетает в сторону

Скачать / Посмотреть на CodePen

(далее…)

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий