3 Ws ttenus % Bootcamps ff Spaces schools JAVASCRIPT YTHON JAVA PH CSS Buttons Learn how to style buttons using CSS. Basic Button Styling Default Button Example button background-color: #4CAFS@; /* Green */ border: none color: white padding: 15px 32px text-align: center text-decoration: none display: inline-block font-size: 16px Button Colors3 w Menu+ ‘$ Bootcamps ffi Spaces SignUp Login schools JAVASCRIPT SQL PYTHON JAVA PHP HOWT @ @ Q Use the background-color property to change the background color of a button: Example -button1 (background-color: #4CAF5@;) /* Green */ -button2 (background-color: #0@8CBA;) /* Blue */ button3 (background-color: ##44336;) /* Red */ -button4 (background-color: #e7e7e7; color: black;) /* Gray */ -buttonS {background-color: #555555;} /* Black */ Try it Yourself » Button Sizes 6px 20px 24px Use the font-size property to change the font size of a button: Example -button1 (font-size: 10px;} -button2 (font-size: 12px;} -button3 (font-size: 16px;} -buttona (font-size: 20px;} -buttonS (font-size: 24px;} Try it Yourself Dark mow schools Opx 24px Example -button1. -button2 -button3 -button4 - buttons Menuy JAVASCRIPT ‘$ Bootcamps ffi Spaces Sign Up Login SQL PYTHON JAVA PHP HOWT @ @ 12px 28px 14px 40px 32px 16px {padding: 1@px 24px;} {padding: 12px 28px; } (padding: 14px 4@px; } (padding: 32px 16px;} (padding: 16px;) Try it Yourself » Rounded Buttons 2px 4px 8px 2px 50 Use the border-radius property to add rounded corners to a button: Example -button1. -button2 button3 -button4 -button5 (border-radius (border-radius {border-radius {border-radius {border-radius Try it Yourself » 2px;} 4px; } 8px; } 12px;} 50%; } 16px Q Dark modeschools | Green | Blue | SCRIPT sau ‘ Bootcamps PYTHON Red Gray | Black JAVA (H Spaces PHP H Use the border property to add a colored border to a button: Example -button. background-color: white color border Hoverable Buttons black 2px solid #4CAFS@; /* Green */ Grey Green Blue Red Grey Black 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3 w Menuy % Bootcamps ff} Spaces Login schools AVASCRIPT SQL = PYTHON = JAVA PHP button: jover background-color: #4CAFS@; /* Green */ color: white Shadow Buttons Use the box-shadow property to add shadows to a button: Example button2 box-shadow: @ 8px 16px @ rgba(0,0,0,0.2), @ 6px 2px @ rgba(0,0,0,0.19) button2:hover box-shadow: @ 12px 16px @ rgba(@,0,0,0.24), @ 17px S@px @ rgba(0,0,0,0.19 Disabled Buttonsw Menu+ ‘$ Bootcamps ffi Spaces Log in schools 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 disabled opacity: 0.6 cursor: not-allowed 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3 w Menu+ ‘$ Bootcamps ffi Spaces Log in schools Button Groups Remove margins and add float:left to each button to create a button group Example button float: left Bordered Button Group Use the border property to create a bordered button group: Example ‘ton float: left border: 1px solid green3 w Menu+ ‘$ Bootcamps ffi Spaces Log in schools Vertical Button Group Use display:block instead of float:left to group the buttons below each other, instead of side by side Example button display: block Button on ImageMenu+ ‘$ Bootcamps ffi Spaces Log in schools Animated Buttons Example Add an arrow on hover: Example Add a "pressed" effect on click:3 w Menuy ‘$ Bootcamps ffi Spaces SignUp Login schools = CSS JAVASCRIPT SQL PYTHON JAVA PHP «=HOWT @ @ Q Try it Yourself » Example Add a "ripple" effect on click: Click Try it Yourself » Dark modeschools SCRIPT sau ‘§ Bootcamps (H Spaces PYTHON JAVA PHP. w: ) Re Titan POPE Cored ET ite ind COLOR PICKER3 w Menuy ‘$ Bootcamps ffi Spaces SignUp Login schools = CSS JAVASCRIPT SQL PYTHON JAVA PHP «=HOWT @ @ Q css Bootcamp Co Rd Spaces Upgrade Newsletter Get Certified Report Error Top Tutorials Dark mode3 w Menu+ ‘$ Bootcamps ffi Spaces Log in schools Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial Query Tutorial Top References HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3,CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference JQuery Reference Top Examples HTML Examples CSS Examples JavaScript Examples How To Examples SQL Examples Python Examples W3.CSS Examples Bootstrap Examples PHP Examples Java Examples XML Examples jQuery Examples Get Certified HTML Certificate CSS Certificate JavaScript Certificate Front End Certificate SQL Certificate Python Certificate PHP Certificate JQuery Certificate Java Certificate C++ Certificate C# Certificate XML Certificate3 w Menuy ‘ Bootcamps fii Spaces SignUp Login schools CSS JAVASCRIPT SQL. PYTHON. «JAVA. PHP, «= HOWT @ @ Q terms of use, cookie and privacy policy. Copyright 1999-2023 by Refsnes Data. All Rights Reserved W3Schools Is Powered by W3.CSS. w schools