ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивые кнопки для вашего сайта на CSS3

Красивые кнопки для вашего сайта на CSS3

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

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

Основным образом употребляются CSS переходы, CSS мультипликация и для неких клавиш мы применяем JavaScript для прибавления и удаления классов. Иконки, которые мы применяем вместе с псевдо-классами :before и :after, сотворили при поддержки обслуживания IcoMoon.

Шаг 1. HTML

Изначально нам нужно сотворить элементарную разметку, мы элементарно прибавляем совместный класс, что будет один неповторимый:

Код

<button class="btn btn-6 btn-6d">Ваша надпись на кнопке</button>

Надлежит подметить, будто мы применяем конкретные пронумерованные классы для разных комплектов стилей клавиш. Любая клавиша владеет дополнительный неповторимый класс. С внедрением иконки, мы прибавляем класс иконки, который станет применять псевдо элемент :before

Шаг 2. CSS

Осмотрим стили, мы приведем один из многих примеров стилизации одной клавиши, наиболее подробно вы можете ознакомится в исходниках:

Код

.btn-6d {
  border: 2px dashed #226fbe;
}

.btn-6d:hover {
  background: transparent;
  color: #226fbe;
}

В демонстрации представлены несколько параметров на примеры кнопок, их разметки практически одинаковы, что остается вам только изменить параметры вывода кнопки.

Виды кнопок, что предоставлены:

1.