Css код стиля кнопки

Стилизация кнопок CSS

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

Скругленная кнопка

.btn < display: inline-block; box-sizing: border-box; padding: 0 25px; margin: 0 15px 15px 0; outline: none; border: 1px solid #fff; border-radius: 50px; height: 46px; line-height: 46px; font-size: 14px; font-weight: 600; text-decoration: none; color: #444; background-color: #fff; box-shadow: 0 4px 6px rgb(65 132 144 / 10%), 0 1px 3px rgb(0 0 0 / 8%); cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; vertical-align: top; transition: box-shadow 0.2s; >.btn:focus-visible < border: 1px solid #4c51f9; outline: none; >.btn:hover < transition: all 0.2s; box-shadow: 0 7px 14px rgb(65 132 144 / 10%), 0 3px 6px rgb(0 0 0 / 8%); >.btn:active < background-color: #808080; >.btn:disabled

Результат:

Двойная рамка

.btn < display: inline-block; box-sizing: border-box; padding: 1px; margin: 0 15px 15px 0; outline: none; border: 1px solid #F18230; border-radius: 25px; height: 46px; line-height: 0; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #fff; position: relative; overflow: hidden; vertical-align: top; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn span < display: block; box-sizing: border-box; padding: 0 25px; height: 42px; line-height: 38px; border: 1px solid #F18230; border-radius: 25px; font-size: 14px; color: #FFFFFF; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #F18230; text-align: center; font-weight: 600; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover span < background-color: #fba768 >.btn:active span < background-color: #c17237 !important; >.btn:disabled

Результат:

Yahoo

.btn < display: inline-block; box-sizing: border-box; padding: 0 20px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #3775dd; box-shadow: 0 2px #21487f; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; vertical-align: top; >.btn:hover < background-color: #002fed; >.btn:active < background-color: #2f599e !important; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:disabled

Результат:

Google

const buttons = document.querySelectorAll(".btn"); buttons.forEach((button) => < button.onclick = function(e)< let x = e.clientX - e.target.offsetLeft; let y = e.clientY - e.target.offsetTop; let ripple = document.createElement("span"); ripple.style.left = `$px`; ripple.style.top = `$px`; this.appendChild(ripple); setTimeout(function()< ripple.remove(); >, 600); > >);

.btn < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 36px; line-height: 36px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #1a73e8; position: relative; overflow:hidden; vertical-align: top; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; z-index: 1; >.btn span < position: absolute; background: #fff; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; animation: btn_ripples 0.6s linear infinite; >@keyframes btn_ripples < 0% < width: 0px; height: 0px; opacity: 0.5; >100% < width: 1000px; height: 1000px; opacity: 0; >> .btn:hover < box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 1px 3px 1px rgb(26 115 232 / 30%); background-color: #297be6; >.btn:active < box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 2px 6px 2px rgb(26 115 232 / 30%); background-color: #1a73e8 !important; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:disabled

Результат:

Whatsapp

.btn < display: inline-block; box-sizing: border-box; padding: 0 24px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 3px; height: 37px; line-height: 37px; font-size: 14px; text-transform: uppercase; font-weight: normal; text-decoration: none; color: #07bc4c; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; transition: box-shadow .18s ease-out,background .18s ease-out,color .18s ease-out; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < box-shadow: 0 1px 1px 0 #cfcfcf, 0 2px 5px 0 #cfcfcf; >.btn:active < background-color: #efefef !important; >.btn:disabled < background-color: #eee; color: #444; pointer-events: none; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 24px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 3px; height: 37px; line-height: 37px; font-size: 14px; text-transform: uppercase; font-weight: normal; text-decoration: none; color: #fff; background-color: #05cd51; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; transition: box-shadow .18s ease-out,background .18s ease-out,color .18s ease-out; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < box-shadow: 0 1px 1px 0 #cfcfcf, 0 2px 5px 0 #cfcfcf; >.btn-2:active < background-color: #058c38 !important; >.btn-2:disabled

Результат:

Facebook

.btn < display: inline-block; box-sizing: border-box; padding: 0 20px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 6px; height: 40px; line-height: 40px; font-size: 17px; font-weight: 600; text-decoration: none; color: #385898; background-color: #e7f3ff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus-visible < box-shadow: 0 0 0 2px #666; >.btn:hover < background-color: #DBE7F2; >.btn:active < transform: scale(0.96); >.btn:disabled

Результат:

Вконтакте

.btn < display: inline-block; box-sizing: border-box; padding: 0 16px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 30px; line-height: 30px; font-size: 12.5px; font-weight: normal; text-decoration: none; vertical-align: top; color: #55677d; background-color: #dfe6ed; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; overflow: hidden; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < opacity: 0.88; >.btn:active < line-height: 32px; >.btn:disabled < pointer-events: none; opacity: 0.65; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 16px; margin: 0 15px 15px 0; outline: none; border: none; border-radius: 4px; height: 30px; line-height: 30px; font-size: 12.5px; font-weight: normal; text-decoration: none; vertical-align: top; color: #fff; background-color: #5181b8; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; overflow: hidden; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < opacity: 0.88; >.btn-2:active < line-height: 32px; >.btn-2:disabled

Результат:

Habr

.btn < display: inline-block; box-sizing: border-box; padding: 0 13px; margin: 0 15px 15px 0; outline: none; border: 1px solid #a4afba; border-radius: 3px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #838a92; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn:hover < border-color: #65a3be; color: #4e879c; >.btn:active < border-color: #78a2b7 !important; color: #3a728b !important; >.btn:disabled < background-color: #eee; color: #444; pointer-events: none; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 13px; margin: 0 15px 15px 0; outline: none; border: 1px solid transparent; border-radius: 3px; height: 32px; line-height: 32px; font-size: 14px; font-weight: 500; text-decoration: none; color: #fff; background-color: #65a3be; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn-2:focus-visible < box-shadow: 0 0 0 3px lightskyblue; >.btn-2:hover < border-color: transparent; background-color: #4986a1; color: #fff; >.btn-2:active < border-color: #6f9cbc !important; background-color: #367089 !important; >.btn-2:disabled

Результат:

Bootstrap

.btn < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: 1px solid #6c757d; border-radius: 5px; height: 38px; line-height: 38px; font-size: 14px; font-weight: 600; text-decoration: none; color: #6c757d; background-color: #fff; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:focus < box-shadow: 0 0 0 3px rgb(108 117 125 / 50%); >.btn:hover < color: #fff; background-color: #6c757d; border-color: #6c757d; >.btn:active < color: #fff; background-color: #6c757d; border-color: #6c757d; >.btn:disabled < pointer-events: none; opacity: 0.65; >.btn-2 < display: inline-block; box-sizing: border-box; padding: 0 15px; margin: 0 15px 15px 0; outline: none; border: 1px solid #7952b3; border-radius: 5px; height: 38px; line-height: 38px; font-size: 14px; font-weight: 600; text-decoration: none; color: #fff; background-color: #7952b3; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn-2:focus < box-shadow: 0 0 0 3px rgb(121 82 179 / 25%); >.btn-2:hover < background-color: #61428f; border-color: #61428f; >.btn-2:active < background-color: #61428f !important; border-color: #61428f !important; >.btn-2:disabled

Результат:

Instagram

body < padding: 15px 0; >.btn < text-decoration: none; color: #6b5770; background-image: linear-gradient(90deg, #fd7f34, #bd155b); display: inline-block; padding: 14px 30px; border: 1px solid; position: relative; z-index: 0; border-radius: 5px; box-sizing: border-box; margin: 0 15px 15px 0; outline: none; cursor: pointer; user-select: none; appearance: none; touch-action: manipulation; >.btn:before < content: ''; position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); background: linear-gradient(90deg, #fd7f34, #bd155b); z-index: -2; transition: .4s; border-radius: 5px; >.btn:after < content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #fff, #fff); z-index: -1; transition: .4s; border-radius: 4px; >.btn:hover < color: #fff; transition: .3s; >.btn:hover:after < background: linear-gradient(90deg, #fd7f34, #bd155b); >.btn:active:after < background: linear-gradient(90deg, #d96d2d, #760f3a); >.btn:focus-visible < box-shadow: 0 0 0 3px #fd7f34; >.btn:disabled < pointer-events: none; >.btn:disabled:before

Результат:

Комментарии 1

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

В HTML5 появилось специальное поле input с атрибутом type=number для вода чисел. Рассмотрим его возможности.

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над.

Источник

60 классных кнопок на CSS с анимацией

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

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

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

#1 Кнопка с эффектом свечения

CSS Button Hover Glow Effect by Kocsten on CodePen.

#2 Скругленная кнопка

Pure Css Button Hover effect by alticreation on CodePen.

Написано на: HTML, CSS (SCSS);

#3 Игристая кнопка

Bubbly Button by Nour Saud on CodePen.

#4 Кнопки с иконками

Icon buttons by Andrea Maselli on CodePen.

#5 Пузырящаяся кнопка

Blobs button by Hilary on CodePen.

Написано на: HTML, CSS (SCSS);

#6 Тонкие кнопки

Simple CSS Button Hover Effects by Natalia Reshetnikova on CodePen.

Автор: Natalia Reshetnikova;

#7 Кнопки с указателем загрузки

Pure CSS Button Loader | Bootstrap 4 | SCSS by dew31794 on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#8 Скругленная пульсирующая кнопка

CSS Button With Hover Effect by Raj Kamal Chenumalla on CodePen.

Написано на: HTML, CSS (SCSS);

#9 «Шипучая» кнопка

CSS Fizzy Button by Jürgen Leister on CodePen.

Написано на: HTML (Haml), CSS (SCSS);

#10 Кнопка N° 045

Button N° 045 by Vitor Siqueira on CodePen.

#11 Кнопка с пузырьками

Flush button by AbhishekBaiju on CodePen.

#12 Кнопочное представление

Button Concept by Shyam on CodePen.

Написано на: HTML, CSS (SCSS), JS (CoffeeScript);

#13 Разрезанная кнопка

CSS Sliced Button by Sarah on CodePen.

#14 Модные кнопки с иконками

Pure CSS Buttons by Ishaan Saxena on CodePen.

Написано на: HTML (Pug), CSS (SCSS);

#15 Изменяющаяся кнопка

Css Button Hover #5 by thelaazyguy on CodePen.

#16 Простая кнопка

CSS button by Tiberiu Raducea on CodePen.

Написано на: HTML, CSS (SCSS);

#17 Кнопка-перевертыш

Auto Width Css Button Flip by Alex Moore on CodePen.

Написано на: HTML, CSS (SCSS);

#18 Кнопка с цветной шторкой вправо

Css Button Hover #2 — Background by thelaazyguy on CodePen.

#19 Замысловатые кнопки

CSS Button Effect by Alexandre do Vale on CodePen.

#20 Кнопки с откидывающейся крышкой

FlipCover CSS Mixin by Velina V Veleva on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#21 Коллекция кнопок с эффектом при наведении

Collection of Button Hover Effects by David Conner on CodePen.

Написано на: HTML, CSS (SCSS);

#22 Кнопка с CSS эффектами: Анимированная рамка & Свечение

CSS Button Effect: Animated Border & Glow. by Anthony on CodePen.

#23 Кнопка с CSS эффектом при наведении

CSS BUTTON HOVER by Imran Pardes on CodePen.

#24 Все еще на виду

Untitled by Alex Bodin on CodePen.

#25 CSS Кнопка с кольцевым индикатором

Pure CSS Button with Ring Indicator by Cole McCombs on CodePen.

#26 Кнопки с разными эффектами при наведении

Button Hover Effects by Kyle Brumm on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#27 Кнопка с пузырьковым эффектом

Button bubble effect by Adrien Grsmto on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#28 Анимированная кнопка отправки данных

animation submit button by Valentin Galmand on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#29 Кто не любит забавные кнопки?

CSS BUTTONS!! by Derek Morash on CodePen.

Написано на: HTML, CSS (SCSS);

#30 Перевертыш

Flipside by Hakim El Hattab on CodePen.

Написано на: HTML, CSS (SCSS), JS;

#31 Резиновые переключатели

Squishy Toggle Buttons by Justin Windle on CodePen.

Написано на: HTML, CSS (Sass);

#32 Эффект при наведении на кнопку с box-shadow

Button hover effects with box-shadow by Giana on CodePen.

Написано на: HTML, CSS (SCSS);

#33 Кнопка «Submit» (Anime.js)

Submit Button (Anime.js) by Andrew Millen on CodePen.

Написано на: HTML, CSS (SCSS), JS (jQuery & anime.js);

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

CSS Button Animation by Sasha on CodePen.

Написано на: HTML (Pug), CSS (SCSS), JS;

#35 CSS кнопка в виде пуговицы на пледе

CSS Button on Plaid by Marcus Connor on CodePen.

#36 CSS кнопка тонет в пузырьках

CSS button with bubbles by Giana on CodePen.

Написано на: HTML, CSS (SCSS);

#37 jQuery + 3D кнопка

jQuery +3D css button by Carlos G Notario on CodePen.

Написано на: HTML, CSS, JS (jQuery);

#38 Кнопка-переключатель на чистом CSS

Pure CSS button switch by Kitty Giraudel on CodePen.

Написано на: HTML, CSS (SCSS);

#39 Коллекция креативных кнопок с эффектом при наведении

Creative Button Hover Collection by Yasin Softaoğlu on CodePen.

#40 Анимации кнопок

CSS Button Animations by Alex Loomer on CodePen.

#41 Кнопка с эффектом сияния и свечения

CSS Button with Hover Effect by Kniw Studio on CodePen.

#42 Изящная кнопка

Button Practice by Ivan Villa on CodePen.

Написано на: HTML, CSS (SCSS);

#43 Шесть анимаций наведения на кнопки

Six Pure CSS Button Hover Animations by Christian on CodePen.

#44 3D Кнопка

3D CSS BUTTON by SULEMANS CODES on CodePen.

#45 Ретро кнопка в стиле 70-х

70s CSS Button by Jordan Halvorsen on CodePen.

#46 100 дневная кнопка N° 045

100 days css Button N° 045 by Vitor Siqueira on CodePen.

#47 Кнопка с еще одним эффектом наведения

Button Hover by Katherine Kato on CodePen.

Написано на: HTML, CSS (SCSS);

#48 Анимация кнопки загрузки

Download Button Animation by Aaron Iker on CodePen.

Написано на: HTML, CSS (SCSS), JS (gsap);

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

Liquid button by Waaark on CodePen.

Написано на: HTML, CSS, JS (jQuery);

#50 Крутые кнопки

Awesome Buttons by Astitva2009 on CodePen.

#51 Кнопка с крутым эффектом наведения

Awesome Button Hover Effect by Devang Bajpai on CodePen.

#52 Кнопка со слайдерной анимацией наведения

Button Animated | Button hover with slide animation Pure css by Ajeet Kumar on CodePen.

#53 Кнопка с анимацией Запрос/Успех/Ошибка

CSS Button Pending / Success / Fail Animation by Felix M. on CodePen.

Написано на: HTML, CSS (SCSS), JS (Babel);

#54 Кнопки с переходами

CSS Button transitions by Robin Treur on CodePen.

Написано на: HTML, CSS (SCSS);

#55 Неоновые кнопки

Untitled by Np|Nihad Pasa on CodePen.

#56 Кнопки с разной анимацией наведения

Pure CSS button hover animation by afa on CodePen.

Написано на: HTML, CSS (SCSS);

#57 Кнопка с эффектом наведения #03

Button Hover Effect #03 by Eslam on CodePen.

#58 Растягивающаяся кнопка

Css Button Hover #1 — Stretchable Button by thelaazyguy on CodePen.

#59 Эффектная кнопка

Supah Awesome CSS Button by Kyle Lavery on CodePen.

Написано на: HTML, CSS (SCSS);

#60 Кнопки с разным заполнением

Pure CSS Button fill effects by Pieter Biesemans on CodePen.

Написано на: HTML, CSS (SCSS);

Заключение

А какие кнопки понравились вам?

P.S. Все представленные здесь кнопки опубликованы на сайте codepen.io и разрабатывались другими авторами, а не нами.

Источник