Как создать красивые анимированные кнопки при помощи CSS3

Новые креативные сайты создаются каждый день, несмотря на все ограничения HTML и CSS. Каскадные стили прошли долгий путь развития от форматирования структурированного контента до управления разметкой документов для различных типов носителей. CSS3 предлагает дизайнерам гораздо больше возможностей в сравнении с предыдущими версиями. И в этом уроке мы покажем как создать красивые анимированные кнопки при помощи одного только CSS3.

Итак, давайте начнем.

Шаг 1: Начнем с HTML

HTML-код довольно простой, мы создадим 2 ссылки с классом «button» и двумя классами для различных цветов — «green» и «red«.

<a href=»#»>Button</a>
<a href=»#»>Button</a>

Предварительный просмотр:

Шаг 2: Основные CSS-стили

Теперь мы создадим стили для HTML-кода, который мы уже написали. Класс «button» создает форму и стиль кнопок.

 .button {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;

Ниже приведены классы для кнопок с разными цветами.

.red {
 border: solid 1px #720000;
 background-color: #c72a2a;
}

Предварительный просмотр:

Шаг 3: CSS3-стили

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

 .button {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 18px;
 font-weight: bold;
 color: #FFFFFF;
 padding: 10px 75px;

Для разных форм кнопки (например, квадрат, овал) мы будем использовать разные классы.

.rounded {
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}

Теперь наш HTML-код будет выглядеть так:

 <a href=»#»>Button</a>
<a href=»#»>Button</a>

Предварительный просмотр:

Теперь нам нужно добавить стили для тени и градиент фона для каждого из цветов.

.red {
 border: solid 1px #720000;
 background-color: #c72a2a;
 background: -moz-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
 background: -webkit-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
 background: -o-linear-gradient(top, #c72a2a 0%, #9e0e0e 100%);
 background: -ms-linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#9e0e0e’, endColorstr=’#9e0e0e’,GradientType=0 );
 background: linear-gradient(top, #c72a2a 0% ,#9e0e0e 100%);
 -webkit-box-shadow: 0px 0px 1px #FF3300, inset 0px 0px 1px #FFFFFF;

Предварительный просмотр:

Шаг 4: Стили для кнопки в различных состояниях

При наведении курсора мыши или нажатии на кнопку мы изменим цвета и градиент фона для различных цветовых (green, red) классов.

.green:active {
 background-color: #638f22;
 background: -moz-linear-gradient(top, #638f22 0%, #486608 100%);
 background: -webkit-linear-gradient(top, #638f22 0%, #486608 100%);
 background: -o-linear-gradient(top, #638f22 0%, #486608 100%);
 background: -ms-linear-gradient(top, #638f22 0% ,#486608 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#486608′, endColorstr=’#486608′,GradientType=0 );
 background: linear-gradient(top, #638f22 0% ,#486608 100%);
}

.red:hover {
 background-color: #b52f2f;
 background: -moz-linear-gradient(top, #b52f2f 0%, #910b0b 100%);

.red:active {
 background-color: #8f2222;
 background: -moz-linear-gradient(top, #8f2222 0%, #660808 100%);
 background: -webkit-linear-gradient(top, #8f2222 0%, #660808 100%);
 background: -o-linear-gradient(top, #8f2222 0%, #660808 100%);
 background: -ms-linear-gradient(top, #8f2222 0% ,#660808 100%);

Предварительный просмотр:

Шаг 5: CSS3-анимация

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

.effect-2:hover {
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}

.effect-3 {
 transition: border-radius 1s;
 -webkit-transition: border-radius 1s;
 -moz-transition: border-radius 1s;
 -o-transition: border-radius 1s;
 -ms-transition: border-radius 1s;
}

.effect-3:hover {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

Теперь наш HTML-код выглядит следующим образом:

 <a href=»#»>Button</a>
<a href=»#»>Button</a>

Предварительный просмотр:

Шаг 5: Создаем разные фигуры

.shape-2 {
 -webkit-border-radius: 50px 5px 50px 5px;
 border-radius: 50px 5px 50px 5px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 50px;
}

А вот стили для дополнительных эффектов и анимации.

.effect-4:hover {
 border-radius: 50px 5px 50px 5px;
 -webkit-border-radius: 50px 5px 50px 5px;
 -moz-border-radius-topleft: 50px;
 -moz-border-radius-topright: 5px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 50px;
}

.effect-5 {
 transition: border-radius 1s;
 -webkit-transition: border-radius 1s;
 -moz-transition: border-radius 1s;
 -o-transition: border-radius 1s;
 -ms-transition: border-radius 1s;
}

.effect-5:hover {

Теперь изменим HTML следующим образом:

 <a href=»#»>Button</a>
<a href=»#»>Button</a>

Предварительный просмотр:

Демонстрация и исходный код

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

Демонстрация

Исходный код

Перевод статьи с www.instantshift.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Создаем красивые кнопки для сайта на CSS3

Красивы кнопки будут не только привлекать взор посетителя, но и дополнять общую картину сайта с помощью простой и в тоже время, уникальной анимацией. Сейчас на просторах веб-дизайна царит минимализм, все чаще разработчики стараются придерживаться этой тенденции и ровняться на дизайн Metro. В данном уроке мы рассмотрим именно такие кнопки. Этот набор кнопок состоит из простых, креативных кнопок с простыми стилями и эффектами. На определенных кнопках эффекты можно увидеть при наведении, на некоторых при нажатии.

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

Шаг 1. HTML

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

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

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

Шаг 2. CSS

Теперь рассмотрим стили, мы приведем пример стилизации одной кнопки, более детально можно рассмотреть в исходниках:

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также:

Красивые 3D-кнопки с помощью CSS3

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

Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами интерфейса для сайтов. Мне очень нравится стиль этого дизайнера, он рисует обалденно. Я уже неоднократно использовал на своих блогах его полезняшки, и одной из этих полезняшек стал набор красивых 3D-кнопок.

С помощью CSS3 я “нарисовал” практически копии этих кнопок, кодом которых и поделюсь в данной статье.

HTML

HTML-код кнопки будет таким:

<button name="" type="submit">Отправить</button>

Можно было бы использовать и тег <input>, но есть 2 причины, по которым в данном случае лучше будет задействовать тег <button>:

1. В Опере на input’е не работает свойство text-shadow;
2. В Опере у input-кнопки появляется черная обводка, если есть фокус в одном из полей формы, что делает кнопку некрасивой.

Примеры

На отдельной странице я подготовил все 10 вариантов 3D-кнопки. CSS-код понравившегося цвета кнопки вы можете скопировать из поля под соответствующей кнопкой.

Также пример такой кнопки вы можете наблюдать в форме добавления комментария на данном блоге.

Особенности

• Каждая кнопка имеет 3 состояния: по умолчанию, при наведении курсора мыши и при клике.
• Полноценно (т.е. так, как и задумывалось) кнопки отображаются в браузерах Opera, Firefox, Chrome, Safari. В Internet Explorer 9 отсутствуют закругления углов, внутренняя обводка и тень у текста (поскольку эти свойства он не поддерживает). Несмотря на это, в IE9 кнопки выглядят неплохо. В IE8 и версиях ниже также отсутствует объемность кнопки, но в них, по крайней мере, есть градиенты.
• Для создания градиентов я воспользовался удобным сервисом Ultimate CSS Gradient Generator.
• Если сравнивать место, занимаемое на сервере, между кнопкой, созданной в виде изображения, и кнопкой, созданной на чистом CSS-коде, то разница получается несущественная – плюс-минус 1 Кб. Однако при этом кнопка на CSS3 позволяет снизить количество запросов к серверу на 1, что, несомненно, является плюсом.

В итоге, несмотря на отсутствие поддержки в браузерах Internet Explorer ряда CSS-свойств, я считаю, что 3D-кнопки, оформленные подобным образом с помощью CSS3, можно смело использовать на своих сайтах, ведь на их юзабилити это никак не сказывается, а пользователи IE лишены лишь возможности наблюдать все прелести современных веб-технологий.

43 примера css3

Все слышали про язык разметки css, с помощью которой верстальщику просто не обойтись. До недавнего времени с помощью этого языка возможно было только сделать разметку страницы (разместить блоки, задать шрифты,  цвет текста и тд.), но с появлением новой версии css3, появились и новые возможности. Конечно все об этом слышали  но так до конца и не знают на что он способен. Ведь появилась масса возможностей, для осуществления которых когда то использовался jquery.

Теперь с помощью css3 можно добиться многих эффектов, и вот перечень некоторых из них: анимация с помощью css3, 3d текст, фон с градиентом, закругление углов, тень для текста, внутренняя тень, тень для блока, слайдер с помощью css3, фильтры для изображений и тд.

Конечно самыми популярными и  красивыми являются эффекты анимации и 3d.

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

Как говориться лучше раз увидеть, чем 100 раз услышать. Поэтому переходим к основной части этого поста — примеры и использование css3.

1. Информация о продукте с помощью css3

Есть много способов чтобы при наведении на продукт или изображение показать о нем информацию, здесь представлено этот эффект с помощью 3d куба.

Скачать

Пример

2. Блок slideup

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

Скачать

Пример

3. Checkbox в стиле apple

Анимационный checkbox на css3 в стиле iphone.

Скачать

Пример

4. Анимационные кнопки с помощью css3

Чтобы сделать анимацию для кнопки, ненужно использовать JavaScript, достаточно выбрать нужный нам фон и несколько строк кода css3.

Скачать

Пример

5. Анимационные звезды css3

Красивые и необычные звезды с анимацией при наведении.

Скачать

Пример

6. Красивые и утонченные кнопки BonBon css3

Очень красивые и необычные кнопки с эффектом 3d, это хорошо видно при нажатии на кнопку.

Пример создания кнопок

7. Эффект 3D с помощью css3

Текст в виде 3D, который можно посмотреть с помощью 3D очков.

Скачать

Пример    

8. 3d анимация с «чистым» css3

Интересная подача блоков в 3d с блоком описания.

Скачать

Пример

9. Речевые облака css3

Подборка речевых облаков для сайта которые выполнены с помощью css2.1 и дополнительно используется css3. И все это без использования javascript.

Скачать

Пример

10. Фотографии в стиле Polaroids

Делаем фотографии в стиле поляроид, и все это при помощи одного лишь css2.1 и css3.

Скачать

Пример

11. Блок со сложенным углом

Простые блоки с загнутым углом на css3 в стиле flat. Хорошо отображаются в современных браузерах.

Скачать

Пример

12. Тень для блоков с помощью css3

Тени для блока в разных стилях и на любой вкус с помощью css3 без использования изображений.

Скачать

Пример

13. Иконки css3

Иконки для вашего сайта в стиле flat, которые выполнены чистым css3. Иконки корректно отображаются в новых браузерах.

Скачать

Пример 

14. Стикеры css3

Список меню или же просто заметки для вашего сайта в виде стикера.

Скачать

15. Солнечная система css3

Модель солнечной системы, выполнена с точными пропорциями и без использования java скриптов и html.

Скачать

Пример

16. Иконки соц. сетей

Иконки социальных сетей с помощью css3. Это экспериментальные иконки, которые выполнены без единого изображения и java скриптов.

Скачать

Пример

17. Крутой Flip эффект

Хороший пример на котором можно показать работу rotateY. Смотрится очень эффектно и легко. И все это css3.

Скачать

Пример

18. Меню с помощью css спрайтов

Меню выполнено при помощи css спрайтов. Корректное отображение на всех популярных браузерах включая IE7+.

Скачать

Пример 

19. Красивая и интересная таблица

Таблица которая хорошо подойдет для прайс листа на сайте, все выполнено на css2.1 и css3.

Скачать

Пример

20. Прозрачные границы с background-clip

Прозрачный border с помощью css3 и с background-clip.

Скачать

Пример

21. Размытие фона css3

Простой и красивый эффект для модального окна с эффектом размытия (матового стекла).

Скачать

Пример

22. Эффект 3d текста при наведении

Эффект 3d при наведении с помощью тени, смотрится достаточно интересно.

Скачать

Пример

23. Ленты 3d при помощи css3

3d ленты на основе одного лишь css3. Этого можно добиться с помощью тени и правильном подборе цветовой гаммы.

Скачать

Пример

24. Прозрачные накладки css3

Красивые и интересные накладки, которые можно использовать как угодно, в виде рекламы или подсказок.

Пример

25. Кнопки для сайта css3

Красивые кнопки без использования изображений. Скачать 

Пример

26. Вертикальное меню css3

Интересная подача вертикального меню с помощью анимации.

Скачать

27. Необычный поиск для сайта

Существуют много подач полей поиска и вот еще одна идея с помощью css3 и jquery с 3d эффектом.

Скачать

Пример

28. Слайдер — витрина средством css3

Очень эффектная презентационная страница с помощью слайдера выполненного на css3.

Скачать

Пример

29. Подсказки css3

Подсказки хорошо подойдут для сайта продажи шаблонов или презентации.

Скачать

Пример

30. Слайдер css3 с эффектом Parallax

Слайдер с эффектом паралакс. Смотрится слайдер легко и выполнено все при помощи css3.

Скачать

Пример

31. Вкладки с анимацией css3

Табы для сайта с помощью css3 и с разными анимациями. В примере представлены 4 вида вкладок.

Скачать

Пример

32. Форма входа

Форма входа и регистрации с помощью css3 и HTML5. В примере представлены 3 разных анимации при нажатии на кнопку Join us.

Скачать

Пример

33. Аккордеон для сайта

Аккордеон css3 с разными видами анимации при нажатии на один из пунктов.

Скачать

Пример

34. Переход между страницами css3

Эффект перехода между страницами, но в большой степени это напоминает вкладки css3.

Скачать

Пример

35. Панель изображений css3

Переход между изображениями с эффектом «жалюзи» и с разной их подачей.

Скачать

Пример

36. Анимационный баннер 

С появлением css3 появилась новая возможность создавать интересные и информативные баннеры с помощью css3.

Скачать

Пример

36. Галерея с фильтром на css3

Галерея с фильтром для изображений, который работает с помощью css3 и html5.

Скачать

Пример

37. Эффект для миниатюры средствами css3 и jquery

Интересная подача превью при наведении. Есть интересные идеи и подачи в примере.

Скачать

Пример

38. Фоновый слайд шоу на весь экран css3 

Слайд шоу для заднего фона на сайте с помощью одного лишь css3. Смотрится это все очень легко и сочно!

Скачать

Пример

39. Лайтбокс для изображений css3

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

Скачать

Пример

40. Угловые формы с помощью css3

С помощью css3 можно сделать многое, тут вы можете увидеть интересные подачи текстовой страницы с помощью кривых линий.

Скачать

Пример

41. Эффект «брызги» css3

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

Скачать

Пример

42. Эффекты типографии css3

Красивые и необычные эффекты при наведении с помощью css3 и jquery. Пример говорит сам за себя.

Скачать

Пример

43. Кнопки с анимацией css3

Красивые и интересные анимации для кнопок, используя css3.

Скачать

Пример

ЕЩЕ ОДНА ПОДБОРКА ПРИМЕРОВ CSS3 —>

Делаем красивые 3D-кнопки на чистом CSS

.submit {

width: 120px;

height: 32px;

padding: 0 0 2px;

font: 16px «Trebuchet MS», Tahoma, Arial, sans-serif;

outline: none;

position: relative;

cursor: pointer;

border-radius: 3px;

color: #FFF;

border: 1px solid #434343;

border-top: 1px solid #535353;

border-bottom: 1px solid #353535;

text-shadow: 1px 1px #2F2F2F;

box-shadow:

inset 0 1px #939393,

inset 1px 0 #707070,

inset -1px 0 #707070,

inset 0 -1px #5A5A5A,

0 2px #414141,

0 3px #343434,

0 4px 2px rgba(0,0,0,0.4)

;

background: -moz-linear-gradient(top,  #656565 0%, #444444 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#656565), color-stop(100%,#444444)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #656565 0%,#444444 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #656565 0%,#444444 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #656565 0%,#444444 100%); /* IE10+ */

background: linear-gradient(top,  #656565 0%,#444444 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#656565′, endColorstr=’#444444′,GradientType=0 ); /* IE6-9 */

background-color: #464646;

}

.submit::-moz-focus-inner{border:0}

.submit:hover {

border-top: 1px solid #464646;

box-shadow:

inset 0 1px #818181,

inset 1px 0 #707070,

inset -1px 0 #707070,

inset 0 -1px #6B6B6B,

0 2px #414141,

0 3px #343434,

0 4px 2px rgba(0,0,0,0.4)

;

background: -moz-linear-gradient(top,  #656565 0%, #565656 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#656565), color-stop(100%,#565656)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #656565 0%,#565656 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #656565 0%,#565656 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #656565 0%,#565656 100%); /* IE10+ */

background: linear-gradient(top,  #656565 0%,#565656 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#656565′, endColorstr=’#565656′,GradientType=0 ); /* IE6-9 */

background-color: #464646;

}

.submit:active {

top: 3px;

border: 1px solid #3A3A3A;

border-top: 1px solid #2F2F2F;

border-bottom: 1px solid #404040;

background: #484848;

box-shadow: inset 0 1px 2px #252525;

}

Оформление элементов управления на CSS: красивые кнопки |

Красота – понятие относительное. Вкусы программистов и пользователей различаются разительно. Появление Интернета и повсеместная трансформация локального программирования в разработку веб-ресурсов, а пользователей программ – в посетителей сайтов не изменила положение вещей.

Содержание статьи

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

Исторический аспект красоты в программировании

Будущие лидеры в области представления и обработки информации начинали с меню. Остальные отрасли программного обеспечения следовали традициям будущих лидеров. Кнопки появились ненамного позже меню, но их первозданная красота заключалась в объеме, который давал возможность отличать кнопку от нажатой или недоступной.

Это было начало «оконных» идей, диалога и традиционного кнопочного «красивого» решения: Ok и Cancel.

Программы-оболочки (среды, инструменты, IDE, …) типа Turbo Vision быстро обрели многочисленных родителей и семейство популярных Vision начало расти. Появление графики на персональных компьютерах обусловило переход в «реально объемный» режим.

Это был «серый объем», но реально оконный интерфейс и начало кнопочного дизайна. Многие уже не помнят первобытные времена в области графики, но красивые кнопки HTML/CSS «появились» уже тогда.

То, что случилось позже, было простым приходом дизайнеров в область разработки веб-ресурсов.

Программист (разработчик), как не назови эту профессию, никогда не отличался склонностью к отображению прекрасного. Его карма – код, идеи и технологии разработки. Дизайнер мыслит иными категориями, и приход дизайнеров перенес частичку реальной красоты в кнопочные формы, оставив в силе:

• идею;
• объем;
• состояние (есть, нажата, недоступна).

Если не вдаваться в тонкости технологии разработки веб-ресурсов, то продуктивные 80-е и 90-е годы дали миру не только Oracle, Microsoft и Google, но и начала реализации «красоты» в реальное работающее и практичное содержание.

Сначала дизайн, потом практичность

Трансформация представлений о красоте в разработке веб-ресурсов была простой. Идея гипертекста – это эффективная и концептуально-ориентированная систематизация всего, что было достигнуто ранее. Красивый стиль написания кода потребовал создавать качественные инструменты диалога на HTML/CSS. Красивые кнопки и меню – важная составляющая любого веб-ресурса.

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

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

Пример: карта на погодном сайте

Просто нарисовать карту (города, района или территории) и приделать к ней несколько кнопок:

• температура;
• влажность;
• давление.

Но это не самое практичное решение. Опыт разработки аналогичных сайтов сразу дает однозначное решение, как сделать «красивую кнопку». CSS правило (одно!) на рисунок карты и нужное количество тегов HTML на каждый населенный пункт (можно вообще без CSS правил). Все решение.

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

Сайт должен быть живым и реально практичным

Дизайн веб-ресурса должен быть безупречным – это не вызывает сомнений. Нет проблем: примеров для чистого CSS (красивые кнопки и меню, всплывающие диалоги, следящие алгоритмы, подсказки с блоками выбора) в Интернете предостаточно.

Проблема не в том, как отобразить предлагаемые наборы CSS правил. Проблема, как совместить предлагаемую красоту с тегами веб-страницы. Не так просто «натянуть» на страницу чужеродный CSS-файл, но перенести идею всегда практично и обогащает разработчика опытом.

Как правило, в варианте «Интернет-CSS» красивые кнопки сопровождаются ресурсами, HTML-вставками, ссылками на сторонние шаблоны или фреймворки. Далеко не каждый разработчик или владелец сайта заинтересован засорять свой код чужим. Это может быть вызвано соображениями безопасности, а чаще всего – отсутствием реальной необходимости.

Скопировать и развить идею дизайна и правил CSS и красивые кнопки собственного изготовления – готовы. Качественное и юридически чистое решение. Правда придется потратить немного времени на редизайн и программирование, но игра стоит свеч.

Безупречный дизайн сайта – это аксиома веб-разработки.

Простота – залог успеха

Первое решение привело ко временному успеху, когда серый объем превратился в красочные кнопки и оригинальные решения меню благодаря участию профессиональных дизайнеров. Красота покорила посетителей сайтов, но внешняя мишура приелась, и мигающие правила CSS стали отвлекать внимание.

Второе решение: предельная простота при полной функциональности – стало нормой. Характерно, что это решение было принято, как само собой разумеющееся. Современные системы управления сайтами (CMS) стали предельно простыми и максимально удобными для достижения поставленных целей.

Разработчик может сегодня в любом варианте сайта – ручной разработки или на базе CMS – выполнить на CSS красивые кнопки по своему вкусу или использовать популярную коллекцию со стороннего сайта. Это рискованное решение.

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

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

Во времена, когда кнопки уже появились, но еще не было CS, красивые кнопки были востребованы вовсе не потому, что они на самом деле были красивы. Они были «убогими». Это была псевдографика, то есть текстовый режим! Но они имели объем, могли показать, что были нажаты и могли становиться недоступными.

Красиво далеко не все, что исполнено профессиональным дизайнером, но всегда красиво то, что исполнено профессионально и несет в себе реальную практическую ценность.

Оформление элементов управления на CSS: красивые кнопки на 1DriveNews.ru.

Создаем градиентные кнопки для сайта на CSS3

.button
{
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
 
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
 
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
 
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
 
}
 
.button, .button span
{
    -moz-border-radius: .3em;
    border-radius: .3em;
}
 
.button span
{
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
 
    /* The background pattern */
 
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
 
    /* Pattern settings */
 
    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
}
 
.button:hover
{
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}
 
.button:active
{
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}

33 стильных кнопки CSS для модных сайтов 2021

Современные кнопки CSS, которые делают взаимодействие с пользователем еще более увлекательным. В этом списке мы собрали кнопки CSS с разумными эффектами наведения и щелчков мышью, чтобы стимулировать ваше творчество.

В более раннем веб-дизайне кнопки призыва к действию были жирными и большими с четким квадратным дизайном. Современные HTML5 и CSS3 предоставили нам бесчисленные возможности для создания элементов любых форм и дизайнов. Ваши творческие проекты не обязательно должны храниться только в файлах PSD, они могут быть воплощены в жизнь с помощью современных фреймворков веб-разработки.В этом списке мы собрали некоторые из лучших и практически применимых дизайнов кнопок CSS, которые вы можете использовать как для дизайна веб-сайтов, так и для дизайна приложений.

Кнопки призыва к действию на целевой странице должны привлекать внимание пользователя. У людей нынешнего поколения меньше внимания, чем у золотой рыбки, анимированные элементы помогут вам привлечь внимание пользователя к нужным точкам. Эти кнопки CSS не только имеют креативные формы и дизайн, но также обладают творческим анимационным эффектом. Некоторые кнопки даже имеют эффекты интерактивной анимации, поэтому обязательно отметьте все дизайны кнопок в этом списке.

Кнопка «Поделиться» Значок с плавающей точкой

Те, кто хочет создать умную кнопку, которая занимает меньше места на экране и обеспечивает более удобное взаимодействие с пользователем, найдут этот фрагмент кода чрезвычайно полезным. В этом примере создатель использовал концепцию кнопки «Поделиться». Пользователи могут просто навести указатель мыши на кнопку, чтобы получить доступ к ссылке в социальных сетях. Такие разумные кнопки CSS исключают лишние щелчки и позволяют пользователю быстро выполнить действие. Хотя дизайн выглядит немного сложным, код скрипта очень прост.Вся анимация кнопок и дизайн сделаны исключительно с использованием скриптов HTML и CSS. Следовательно, разработчики могут легко использовать этот код и приспособить его к своему дизайну.

Информация / Скачать демо

Пузырь чата

Современные веб-приложения помогают нам напрямую взаимодействовать с нашей аудиторией и повышают шансы превратить их в клиентов. Инструменты чата являются одними из самых эффективных приложений, которые помогают владельцам сайтов предоставлять более качественные услуги своим посетителям.Сделав параметры чата видимыми и легкодоступными, посетители смогут легко связаться с вами. Если вы ищете простую, но эффективную анимацию кнопки чата, этот фрагмент кода будет вам очень полезен. Значок чата плавно превращается в крестик, когда вы нажимаете на пузырек. Поскольку вся анимация происходит в пузыре чата, вам не нужно беспокоиться о нехватке места.

Информация / Скачать демо

Кнопка наведения

Это одна из самых практичных кнопок CSS, которую можно использовать на любом веб-сайте и в любом приложении.При наведении курсора на кнопку стрелка расширяется и закрывает текстовую область. Как и дизайн, код скрипта также прост и аккуратен. Вся анимация кнопок создается с помощью сценария CSS3, поэтому вы можете легко редактировать код и использовать его даже на своем существующем веб-сайте. Размер шрифта и цветовые переходы выполнены идеально в самом дизайне по умолчанию, поэтому, если вы торопитесь, вы можете использовать код как таковой и сэкономить свое время.

Информация / Скачать демо

Кнопка Love 2

В этом примере кнопки создатель дал три типа анимации наведения кнопки.Все три дизайна кнопок используют разные эффекты анимации. Поскольку этот дизайн создан с использованием сценария CSS3, эффекты анимации быстрые. Создателю удалось правильно объединить эффекты, используя идеальное время. Чтобы помочь вам полностью понять код, разработчик поделился сценарием кода в редакторе CodePen. Вы можете редактировать код и визуализировать результаты в самом редакторе CodePen. Таким образом, вы можете получить четкое представление, прежде чем использовать этот дизайн на своем веб-сайте.

Информация / Скачать демо

Пузырьковый эффект

Если вы ищете интерактивные кнопки CSS в современном стиле, чтобы дать пользователям ощущение полного погружения, этот дизайн вас впечатлит.Как следует из названия, создатель использовал эффекты пузыря на кнопке. Все эффекты анимации происходят на границе кнопки, поэтому содержимое внутри кнопки не изменяется. Кроме того, эффект анимации занимает мало места на экране, поэтому вы можете использовать этот эффект в любой части вашего веб-сайта. Эластичность и пузырьки придают эффекту анимации плавный вид. Для создания этого дизайна создатель использовал HTML5, CSS3 и несколько строк Javascript. Использование таких кнопок CSS в вашем дизайне придаст характер вашему общему дизайну.

Информация / Скачать демо

Кнопка запуска ракеты

В этом примере создатель попытался дать вам реальное ощущение запуска веб-сайта / приложения. Хотя площадь поверхности кнопки мала, эффект запуска ракеты очень естественный. В частности, эффект дрожания кнопки в конце позволяет пользователю действительно почувствовать запуск. Такие анимированные кнопки CSS интересно использовать, а также добавляют смысла дизайну. Весь сценарий кода этой забавной концепции доступен вам в редакторе Codepen.Поскольку у этого эффекта есть множество атрибутов, о которых нужно позаботиться, кодирование немного сложное. Впрочем, вы понимаете код и можете обрезать его в соответствии с вашими потребностями.

Информация / Скачать демо

Жидкая кнопка

Как следует из названия, создатель использовал эффект жидкости. Создатель сохранил эффект незаметности, к тому же он занимает совсем немного места на экране; следовательно, вы можете легко разместить эту кнопку в любой части вашего веб-сайта. Благодаря использованию сценария SCSS и нескольких строк Javascript эффект анимации плавный.Если вы хотите сделать важную кнопку призыва к действию на веб-странице уникальной и интерактивной для других, подобные эффекты вам пригодятся.

Информация / Скачать демо

Новая анимация при наведении курсора на транзакцию

Как следует из названия, этот пример предназначен для кнопок транзакции. Когда вы наводите курсор на кнопку, карта плавно перемещается и вставляется в устройство для считывания карт. Поскольку это концептуальная модель, анимация запускается сразу же при наведении курсора на кнопку.Чтобы сделать концепцию еще более осмысленной, вы можете запускать анимацию, когда пользователь нажимает кнопку транзакции. Код скрипта немного сложен, потому что дизайн должен иметь дело с множеством элементов и переменных, чтобы анимация была плавной. Но, тем не менее, вы можете легко обрабатывать код и использовать его на своем веб-сайте или в приложении.

Информация / Скачать демо

Конфетный кликер

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

Информация / Скачать демо

Возбужденная кнопка

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

Информация / Скачать демо

Миксин с эффектом наведения на границу кнопки Sass

Создатель этой кнопки использовал эффект смешения цветов. Как и большинство других кнопок CSS в этом списке, эта также использует скрипт CSS3.Следовательно, цвета естественные, и на этой кнопке отчетливо ощущается эффект смешения цветов. Поскольку это демонстрация, создатель использовал простые цвета. Но вы можете использовать более модные цвета и градиентные цвета, чтобы сделать этот эффект еще более привлекательным и ярким. Еще одно преимущество этого дизайна в том, что он сделан исключительно с использованием скрипта CSS3. Следовательно, редактирование и использование кода в вашем проекте будет простой задачей.

Информация / Скачать демо

Микровзаимодействия Hover

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

Информация / Скачать демо

Кнопка CSS 2

CSS Button 2 специально разработан для веб-сайтов электронной коммерции. В рамках данного пространства мы должны рассказать всю информацию о продукте и предложениях. Такие маленькие анимированные кнопки помогут вам сэкономить место и в то же время привлечь внимание пользователя. При наведении курсора на кнопку отображается цена товара. Чтобы детали были неотразимы, вы можете показать, как вы обесценили пользователей. Самое лучшее в этой кнопке CSS — это то, что она полностью разработана с использованием скрипта CSS3.Таким образом, вы можете легко включить этот дизайн даже на свой существующий веб-сайт. Хотя он разработан для веб-сайтов электронной коммерции, вы также можете использовать его для других веб-сайтов и приложений.

Информация / Скачать демо

Анимация кнопок CSS

Как и в упомянутой выше кнопке CSS 2, вы можете разумно использовать эффект анимации, чтобы оживить ваши элементы. Кнопки призыва к действию очень важны, особенно на целевой странице. Вы можете использовать привлекающий внимание крутой анимационный эффект, чтобы сделать специальную кнопку немного особенной и отличной от других.В этом наборе создатель предоставил вам шесть типов анимации кнопок CSS. Все они созданы с использованием новейших скриптов HTML5 и CSS3. Следовательно, работа с ним не будет проблемой для разработчика. Кроме того, вы можете легко интегрировать эту кнопку в свой проект.

Информация / Скачать демо

Простой эффект наведения кнопки CSS

Simple CSS Button Hover Effect — еще один набор CSS-кнопок с эффектом анимации. В предыдущей анимации кнопки вы выполняли всю анимацию внутри кнопки.В этом случае вся анимация происходит на внешней стороне кнопки. В этом наборе даны два типа кнопок: одна имеет освященный дизайн, а другая — полноцветная кнопка; обе кнопки созданы с использованием скрипта CSS3. Поскольку это прямоугольная кнопка, она легко вписывается в плоский дизайн. Даже если вам нужно, вы можете изменить размер кнопки, потому что она разработана с использованием новейших скриптов HTML5 и CSS3.

Информация / Скачать демо

Простые эффекты наведения кнопки CSS 2

В предыдущих анимациях кнопок CSS мы видели тонкие маленькие анимации.В этом наборе разработчик использовал новые эффекты. С помощью скрипта CSS3 новые эффекты выглядят гладкими и чистыми. Хотя эффекты креативны и уникальны, они гладкие, поэтому пользователю не придется ждать. Эти эффекты не только выглядят профессионально, но и имеют профессиональную структуру кода. Так что другие разработчики могут легко использовать его в своих проектах. Поскольку он использует скрипт CSS3, вы можете настроить эффекты в соответствии с вашими потребностями дизайна. Или вы можете использовать этот пример как источник вдохновения для вашего собственного дизайна.

Информация / Скачать демо

Кнопка CSS 70-х

Если вы создаете шаблон веб-сайта в стиле ретро, ​​такие элементы придадут вашему веб-сайту аутентичный вид. Хотя это ретро-элемент, вы также можете увидеть этот эффект на многих современных веб-сайтах. В минималистичных шаблонах веб-сайтов подобные элементы будут выглядеть более привлекательно. По умолчанию эти эффекты просты и понятны, поэтому вы можете легко разместить их в любой части веб-сайта. Используемый эффект гладкий и чистый.Кроме того, эффект разработан с использованием скрипта CSS3, поэтому вы можете ожидать такого же результата и на мобильных устройствах. В зависимости от выбранной цветовой схемы вы можете настроить цвет кнопки.

Информация / Скачать демо

Три кнопки на чистом CSS

Три кнопки на чистом CSS, приведенные в этом наборе, просто великолепны. Эффект тонкий, но ему удается привлечь внимание пользователя. Поскольку все эффекты анимации происходят внутри кнопки призыва к действию, вам не нужно настраивать содержимое на своих веб-страницах.Все три кнопки просты и понятны, что позволяет легко разместить их на любых веб-сайтах и ​​на любых веб-страницах. Для демонстрационной цели создатель использовал обычные прямоугольные кнопки. Но вы можете изменить форму кнопок в соответствии с вашими потребностями в дизайне. Разработчик этих кнопок CSS использовал последние версии скриптов HTML5 и CSS3, поэтому работать с ними будет легко и для других разработчиков.

Информация / Скачать демо

   Ссылка на кнопку  
  Настоящая кнопка   

   Ссылка на кнопку  
  Настоящая кнопка   

  * {
 box-sizing: border-box; 
}  

  a.button {
 текстовое оформление: нет; 
}  

  button.button {
 border: none; 
 цвет фона: прозрачный; 
 семейство шрифтов: наследование; 
 отступ: 0; 
 курсор: указатель; 
 @media screen и (-ms-high-Contrast: active) {
 border: 2px сплошной текущий цвет; 
} 
} 
  

  a.button, 
 button.button {
 display: inline-flex; 
 align-items: center; 
 justify-content: center; 
}  

  $ btnColor: # 3e68ff; 
 a.button, 
 button.button {
 background-color: $ btnColor; 
 цвет: #fff; 
 радиус границы: 8 пикселей; 
 box-shadow: 0 3px 5px rgba (0, 0, 0, 0,18); 
} 
  

  a.button, 
 button.button {
 padding: 0.25em 0.75em; 
 min-width: 10ch; 
 min-height: 44px; 
}  

  a.button, 
 button.button {
 text-align: center; 
 line-height: 1,1; 
}  

  a.button, 
 button.button {
 &: hover {
 background-color: scale-color ($ btnColor, $ lightness: -20%); 
} 
}  

  a.button, 
 button.button {
 переход: 220 мс для всех выходов; 
 
 
} 
  

  a.button, 
 button.button {
 &: focus {
 outline-style: solid; 
 цвет контура: прозрачный; 
 box-shadow: 0 0 0 4px scale-color ($ btnColor, $ lightness: -40%); 
} 
} 
  

  &: hover, 
 &: active {
 background-color: scale-color ($ btnColor, $ lightness: -20%); 
}  

  & - small {
 font-size: 1.15rem; 
}  

  & - блок {
 ширина: 100%; 
}  

 
           Кнопка 
          

 
           Основной 
           Дополнительный 
           Успех 
           Опасно 
           Предупреждение 
           Информация 
           Светлый 
           Темный 
           Ссылка 
          

 
          
            Начальный
          
          
            Вторичный
          
          
            Успех
          
          
            Опасность
          
          
            Предупреждение
          
          
            Информация
          
          
            Свет
          
          
            Тьма
          
          

 
           Основной 
           Дополнительный 
           Успех 
           Опасно 
           Предупреждение 
           Информация 
           Светлый 
           Темный 
          

 
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Начальный
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Вторичный
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Успех
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Опасность
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Предупреждение
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Информация
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Свет
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
            Тьма
          
          

 
          
             
          
          кнопка <
            type = "кнопка"
           
            data-mdb-ripple-color = "темный"
          >
             
          
          
             
          
          
             
          
          

 
          

            <а
             
             
            >
               
            

            

              

                <а
                 
                 
                  >   
              

              

                <а
                 
                 
                  >   
              

              

                <а
                 
                 
                  >   
              

              

                <а
                 
                 
                  >   
              

            

          

          

 
            <а
             
             
              href = "#!"
              роль = "кнопка"
              >   
            

 
               Twitter 
            

 
                8  
            

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

 
           Первичная ссылка 
           Ссылка 
          

 
          <а
            href = "#"
           
            tabindex = "- 1"
            роль = "кнопка"
            aria-disabled = "правда"
            > Первичная ссылка 
          <а
            href = "#"
           
            tabindex = "- 1"
            роль = "кнопка"
            aria-disabled = "правда"
            > Ссылка 
          

 
          

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

 
          

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

 
          

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

 
          

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

 
           Переключить ссылку 
          <а
            href = "#"
           
            роль = "кнопка"
            data-mdb-toggle = "кнопка"
            ария-прессованный = "правда"
            > Активная ссылка переключения 
           Отключено переключение ссылки