Dark code
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOW TO W3.CSS JAVA JQUERY
Image Zoom Tutorials References Exercises Videos Pro Get Certified Free Website Log in
Image Magnifier Glass
Image Comparison Slider
Favicon
Buttons
Alert Buttons NEW
Outline Buttons
How TO - Download Button
Split Buttons We just launched
Animated Buttons W3Schools videos
Fading Buttons
Button on Image ❮ Previous Next ❯
Social Media Buttons
Read More Read Less
Loading Buttons Learn how to style download buttons with CSS.
Download Buttons Explore now
Pill Buttons
Auto width:
Notification Button
Icon Buttons COLOR PICKER
Next/prev Buttons Download
More Button in Nav
Block Buttons Full width:
Text Buttons
Round Buttons Download
Try it Yourself »
Get certified
by completing
How To Create Download Buttons a course today!
Step 1) Add HTML: w3
school
s
Add an icon library, such as font awesome, and append icons to HTML buttons:
2
CE
02
TI 2
R
FI .
ED
Example
Get started
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
CODE GAME
<!-- Auto width -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- Full width -->
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>
Step 2) Add CSS:
Example Play Game
/* Style buttons */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 20px;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
Try it Yourself »
Tip: Go to our Icons Tutorial to learn more about icons.
Go to our CSS Buttons Tutorial to learn more about how to style buttons.
❮ Previous Next ❯
Report Error Spaces Pro Buy Certificate
Top Tutorials Top References Top Examples Get Certified
HTML Tutorial HTML Reference HTML Examples HTML Certificate
CSS Tutorial CSS Reference CSS Examples CSS Certificate
JavaScript Tutorial JavaScript Reference JavaScript Examples JavaScript Certificate
How To Tutorial SQL Reference How To Examples Front End Certificate
SQL Tutorial Python Reference SQL Examples SQL Certificate
Python Tutorial W3.CSS Reference Python Examples Python Certificate
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples PHP Certificate
Bootstrap Tutorial PHP Reference Bootstrap Examples jQuery Certificate
PHP Tutorial HTML Colors PHP Examples Java Certificate
Java Tutorial Java Reference Java Examples C++ Certificate
C++ Tutorial Angular Reference XML Examples C# Certificate
jQuery Tutorial jQuery Reference jQuery Examples XML Certificate
FORUM | ABOUT
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly
reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie
and privacy policy.
Copyright 1999-2022 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.
