- Примеры. Стили кнопок CSS
- CSS Buttons
- Example
- Button Sizes
- Example
- Example
- Rounded Buttons
- Example
- Colored Button Borders
- Example
- Hoverable Buttons
- Example
- Shadow Buttons
- Example
- Disabled Buttons
- Example
- Button Width
- Example
- Button Groups
- Example
- Bordered Button Group
- Example
- Vertical Button Group
- Example
- Button on Image
- Animated Buttons
- Example
- Example
- Example
- Example
- 65 cool CSS Buttons – with Animations!
- #1 Hover Glow Effect
- #2 Rounded Button
- #3 Blubby Button
- #4 Icon buttons
- #5 Blobs button
- #6 Thin Buttons
- #7 Bootstrap Buttons
- #8 Rounded Pulse Button
- #9 CSS Fizzy Button
- #10 Button N° 045
- #11 Flush button
- #12 Button Concept
- #13 Sliced Button
- #14 More fancy Icon buttons
- #15 Button Change
- #16 Simple Button
- #17 Button Flip
- #18 Swipe Right Button
- #19 Fancy Buttons
- #20 FlipCover Buttons
- #21 Collection of Button Hover Effects
- #22 CSS Button Effect: Animated Border & Glow
- #23 CSS Button Hover
- #24 Still in View
- #25 Pure CSS Button with Ring Indicator
- #26 Button Hover Effects
- #27 Button bubble effect
- #28 Animation Submit Button
- #29 Who doesn’t like Fun Buttons?
- #30 Flipside
- #31 Squishy Toggle Buttons
- #32 Button hover effect with box-shadow
- #33 Submit Button (Anime.js)
- #34 CSS Button Animation
- #35 CSS Button on Plaid
- #36 CSS button with bubbles
- #37 jQuery +3D css button
- #38 Pure CSS button switch
- #39 Creative Button Hover Collection
- #40 CSS Button Animations
- #41 CSS Button with Hover Effect
- #42 Button Practice
- #43 CSS Button Design Animation
- #44 Six pure CSS Button Hover Animations
- #45 3D CSS BUTTON
- #46 70s CSS Button
- #47 100 days css Button N° 045
- #48 Button Hover
- #49 Download Button Animation
- #50 Liquid button
- #51 Awesome Buttons
- #52 Awesome Button Hover Effect
- #53 CSS Button Hover Effect INK
- #54 Button hover with slide animation
- #55 70s CSS Button
- #56 Button Love #4 – 2019
- #57 CSS Button Animation
- #58 CSS Button Pending/Success/Fail Animation
- #59 CSS Button transitions
- #60 Neon Buttons
- 61 Pure CSS button hover animation
- #62 Home Button Hover Effect #03
- #63 Css Button Hover #1 – Stretchable Button
- #64 Supah Awesome CSS Button
- #65 Pure CSS Button fill effects
- Conclusion
Примеры. Стили кнопок CSS
Предлагаю вашему вниманию неплохую подборку стилей кнопок CSS. Самые различные виды дизайна, оформления весьма станут по вкусу многим. Подборку можно расценивать как для вдохновения или же использовать по прямому назначению. Чтобы создать кнопку CSS достаточно базовых знаний, а при использовании специальных сервисов «Генератор кнопок CSS», то и знаний много не нужно. Есть также и программы в которых можно создавать кнопки CSS «Программы для создания меню CSS». Хоть программы и предназначены для меню, но в них есть возможность создавать отдельные кнопки CSS.
a.buttons < width: 150px; height: 30px; text-decoration: none; padding-top: 9px; color: #a675b3; text-align: center; line-height: 20px; display: block; margin: 20px auto; font: normal 17px arial; >a.buttons:not(.active) < box-shadow: inset 0 1px 1px rgba(111, 55, 125, 0.8), inset 0 -1px 0px rgba(63, 59, 113, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #150a1e; background-image: linear-gradient(#3b2751, #271739); text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #311d47; >a.buttons:not(.active):hover, a.buttons:not(.active):focus < transition: color 200ms linear, text-shadow 500ms linear; color: #fff; text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #2a153c; >a.buttons:not(:hover)
a.green < border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08); color: #fff; display:block; width:100px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 14px; padding: 8px 16px; margin: 20px auto; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: background-color 0.1s linear; -moz-transition: background-color 0.1s linear; -o-transition: background-color 0.1s linear; transition: background-color 0.1s linear; >a.green < background-color: rgb( 43, 153, 91 ); border: 1px solid rgb( 33, 126, 74 ); >a.green:hover
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: