Css button style examples

Стилизация кнопок 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 событиях можно получить координаты клика или координаты курсора когда он находится над.

Источник

CSS Buttons

Use the background-color property to change the background color of a button:

Example

Button Sizes

Use the font-size property to change the font size of a button:

Example

Use the padding property to change the padding of a button:

10px 24px 12px 28px 14px 40px 32px 16px 16px

Example

.button1
.button2
.button3
.button4
.button5

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

Colored Button Borders

Use the border property to add a colored border to a button:

Example

Hoverable Buttons

Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the «hover» effect:

Example

.button <
transition-duration: 0.4s;
>

.button:hover background-color: #4CAF50; /* Green */
color: white;
>
.

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

.button1 <
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
>

.button2:hover box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
>

Disabled Buttons

Use the opacity property to add transparency to a button (creates a «disabled» look).

Tip: You can also add the cursor property with a value of «not-allowed», which will display a «no parking sign» when you mouse over the button:

Example

Button Width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

Button Groups

Remove margins and add float:left to each button to create a button group:

Example

Bordered Button Group

Use the border property to create a bordered button group:

Example

Vertical Button Group

Use display:block instead of float:left to group the buttons below each other, instead of side by side:

Example

Button on Image

Button

Animated Buttons

Example

Example

Add a «pressed» effect on click:

Example

Example

Add a «ripple» effect on click:

Источник

65 cool CSS Buttons – with Animations!

CSS buttons are an important part of web design, as they not only improve the user experience, but also affect the look and aesthetics of the website. In this article you will find a collection of the best CSS buttons.

Whether big and bold on your home page or small and discreet in the footer, buttons are a very important design element for the user flow on your website. For a corporate website, a more discreet design is often used, while creative industries tend to use more eye-catching and “flashy” buttons. So that all industries are equally served, you will find many different button styles here.

I – and many other web developers/designers – also set a high value on animations for Hover or Focus, which is why all of the following buttons bring along nice animations. But now we start directly!

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Hover Glow Effect

Author: Kocsten;
Coded in: HTML, CSS;

#2 Rounded Button

Author: alticreation;
Coded in: HTML, CSS (SCSS);

#3 Blubby Button

Author: Nour Saud;
Coded in: HTML, CSS;

#4 Icon buttons

Author: Andrea Maselli;
Coded in: HTML, CSS;

#5 Blobs button

Author: Hilary;
Coded in: HTML, CSS (SCSS);

#6 Thin Buttons

Author: Natalia Reshetnikova;
Coded in: HTML, CSS;

#7 Bootstrap Buttons

Author: dew31794;
Coded in: HTML, CSS (SCSS), JS;

#8 Rounded Pulse Button

Author: Raj Kamal;
Coded in: HTML, CSS (SCSS);

#9 CSS Fizzy Button

See the Pen CSS Fizzy Button by Jürgen Leister (@webLeister) on CodePen.

Author: Jürgen Leister;
Coded in: HTML (Haml), CSS (SCSS);

#10 Button N° 045

Author: Vitor Siqueira;
Coded in: HTML, CSS;

#11 Flush button

Author: AbhishekBaiju;
Coded in: HTML, CSS;

#12 Button Concept

Author: Shyam;
Coded in: HTML, CSS (SCSS), JS (CoffeeScript);

#13 Sliced Button

Author: Sarah;
Coded in: HTML, CSS;

#14 More fancy Icon buttons

Author: Ishaan Saxena;
Coded in: HTML (Pug), CSS (SCSS);

#15 Button Change

Author: thelaazyguy;
Coded in: HTML, CSS;

#16 Simple Button

See the Pen CSS button by Tiberiu Raducea (@tyberiu88) on CodePen.

Author: Tiberiu Raducea;
Coded in: HTML, CSS (SCSS);

#17 Button Flip

Author: Alex Moore;
Coded in: HTML, CSS (SCSS);

#18 Swipe Right Button

Author: thelaazyguy;
Coded in: HTML, CSS;

#19 Fancy Buttons

See the Pen CSS Button Effect by Alexandre do Vale (@alexandrevale) on CodePen.

Author: Alexandre do Vale;
Coded in: HTML, CSS, JS;

#20 FlipCover Buttons

See the Pen FlipCover CSS Mixin by Velina V Veleva (@vveleva) on CodePen.

Author: Velina V Veleva;
Coded in: HTML, CSS (SCSS), JS;

#21 Collection of Button Hover Effects

Author: David Conner;
Coded in: HTML, CSS (SCSS);

#22 CSS Button Effect: Animated Border & Glow

Author: Blade Multimedia;
Coded in: HTML, CSS;

#23 CSS Button Hover

See the Pen CSS BUTTON HOVER by Imran Pardes (@folaad) on CodePen.

Author: Imran Pardes;
Coded in: HTML, CSS;

#24 Still in View

See the Pen XWrqpxB by Alex Bodin (@Alexb98) on CodePen.

Author: Alex Bodin;
Coded in: HTML, CSS;

#25 Pure CSS Button with Ring Indicator

Author: Cole McCombs;
Coded in: HTML, CSS;

#26 Button Hover Effects

Author: Kyle Brumm;
Coded in: HTML, CSS (SCSS), JS;

#27 Button bubble effect

Author: Adrien Grsmto;
Coded in: HTML, CSS (SCSS), JS;

#28 Animation Submit Button

Author: Valentin Galmand;
Coded in: HTML, CSS (SCSS), JS;

#29 Who doesn’t like Fun Buttons?

Author: Derek Morash;
Coded in: HTML, CSS (SCSS);

#30 Flipside

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

Author: Hakim El Hattab;
Coded in: HTML, CSS (SCSS), JS;

#31 Squishy Toggle Buttons

Author: Justin Windle;
Coded in: HTML, CSS (Sass);

#32 Button hover effect with box-shadow

Author: Giana;
Coded in: HTML, CSS (SCSS);

#33 Submit Button (Anime.js)

Author: Andrew Millen;
Coded in: HTML, CSS (SCSS), JS (jQuery & anime.js);

#34 CSS Button Animation

Author: Sasha;
Coded in: HTML (Pug), CSS (SCSS), JS;

#35 CSS Button on Plaid

Author: Marcus Connor;
Coded in: HTML, CSS;

#36 CSS button with bubbles

Author: Giana;
Coded in: HTML, CSS (SCSS);

#37 jQuery +3D css button

Author: Carlos G Notario;
Coded in: HTML, CSS, JS (jQuery);

#38 Pure CSS button switch

Author: Kitty Giraudel;
Coded in: HTML, CSS (SCSS);

#39 Creative Button Hover Collection

Author: Yasin Softaoğlu;
Coded in: HTML, CSS;

#40 CSS Button Animations

Author: Alex Loomer;
Coded in: HTML, CSS;

#41 CSS Button with Hover Effect

Author: Kniw Studio;
Coded in: HTML, CSS;

#42 Button Practice

Author: Ivan Villa;
Coded in: HTML, CSS (SCSS);

#43 CSS Button Design Animation

Author: ABlimits Studio;
Coded in: HTML, CSS;

#44 Six pure CSS Button Hover Animations

Author: Christian;
Coded in: HTML, CSS;

#45 3D CSS BUTTON

Author: SULEMANS CODES;
Coded in: HTML, CSS, JS;

#46 70s CSS Button

See the Pen 70s CSS Button by Jordan Halvorsen (@halvo) on CodePen.

Author: Jordan Halvorsen;
Coded in: HTML, CSS;

#47 100 days css Button N° 045

Author: Vitor Siqueira;
Coded in: HTML, CSS;

#48 Button Hover

See the Pen Button Hover by Katherine Kato (@kathykato) on CodePen.

Author: Katherine Kato;
Coded in: HTML, CSS (SCSS);

#49 Download Button Animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (gsap);

#50 Liquid button

Author: Waaark;
Coded in: HTML, CSS, JS (jQuery);

#51 Awesome Buttons

Author: Astitva2009;
Coded in: HTML, CSS;

#52 Awesome Button Hover Effect

Author: Devang Bajpai;
Coded in: HTML, CSS;

#53 CSS Button Hover Effect INK

Author: morgasmatron;
Coded in: HTML, CSS (SCSS);

#54 Button hover with slide animation

Author: Ajeet Kumar;
Coded in: HTML, CSS;

#55 70s CSS Button

See the Pen 70s CSS Button by Jordan Halvorsen (@halvo) on CodePen.

Author: halvo;
Coded in: HTML, CSS;

#56 Button Love #4 – 2019

Author: punit chawla;
Coded in: HTML, CSS (SCSS);

#57 CSS Button Animation

Author: Yohaan Chokhany;
Coded in: HTML, CSS, JS;

#58 CSS Button Pending/Success/Fail Animation

Author: Felix M.;
Coded in: HTML, CSS (SCSS), JS (Babel);

#59 CSS Button transitions

Author: Robin Treur;
Coded in: HTML, CSS (SCSS);

#60 Neon Buttons

Author: Np|Nihad Pasa;
Coded in: HTML, CSS;

61 Pure CSS button hover animation

Author: afa;
Coded in: HTML, CSS (SCSS);

#62 Home Button Hover Effect #03

Author: Eslam;
Coded in: HTML, CSS;

#63 Css Button Hover #1 – Stretchable Button

Author: thelaazyguy;
Coded in: HTML, CSS;

#64 Supah Awesome CSS Button

Author: Kyle Lavery;
Coded in: HTML, CSS (SCSS);

#65 Pure CSS Button fill effects

Author: Pieter Biesemans ;
Coded in: HTML, CSS (SCSS);

Conclusion

Which button do you like best? If you have also published buttons on codepen, please let me know so I can extend this list! 🙂

Note: All buttons are all published on codepen.io and not by me .

Not enough? Then this could be something for you:

Источник