Advertising

Personalized buttons

Classical Buttons + Colors + Font Awesome + CSS, everything to do the best buttons

Button Code
<button class="btn"><i class="icon-download"></i> Download</button>
<button class="btn btn-success"><i class="icon-download-alt"></i> Download</button>
<button class="btn btn-info"><i class="icon-link"></i> Link</button>
<button class="btn btn-primary"><i class="icon-user"></i> User</button>
<button class="btn btn-danger"><i class="icon-envelope"></i> Email</button>
<button class="btn btn-inverse"><i class="icon-phone"></i> Call</button>

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

Link
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Style Switcher
Choose Layout
22 Patterns (Boxed Layout) Remove
  • Diagonal Striped Brick
  • Noisy Grid
  • P6
  • Kindajean
  • Squairy Light
  • Struckaxiom
  • Crosses
  • Washi
  • G Play Pattern
  • Merely Cubed
  • Bedge Grunge
  • Blueprint
  • Gram Light
  • Gram Dark
  • Mocha Grunge
  • Grey Wash Wall
  • Random Grey Variations
  • PX by Gre3g
  • Irongrip
  • Escheresque Ste
  • Binding Dark
  • Diagmonds
22 Backgrounds (Boxed Layout) Remove
  • Colors Red Blue
  • Concert Crowd
  • Crystal Light
  • Michael Jackson Singer Hat
  • City Landscape
  • Tom Clancys Ghost Recon
  • Zeichnung Abstrakt Linien
  • Zeichnung Spray
  • Wayne Rooney Footballer
  • Abstract Colorful Lines
  • Color Lines
  • Skyscraper World
  • Evening in the Alps
  • Evening Reflections
  • The London eye at Night
  • Abtsract Glow
  • Pizza
  • Romantic Atmosphere
  • New York City
  • Kitty
  • Forest Path Summer
  • Emirates Stadium Sports
22 Predefined Color Skins Default
  • Default
  • Dark
  • Food
  • News
  • Sport
  • Yellow
  • Turquoise
  • Cyan
  • Blue
  • Purple
  • Green
  • Orange
  • Brown
  • Rose
  • Pink
  • Red
  • White
  • Sky
  • Forest
  • Violet
  • Old
  • Night
40 Headers Background Remove
  • Header 1
  • Header 2
  • Header 3
  • Header 4
  • Header 5
  • Header 6
  • Header 7
  • Header 8
  • Header 9
  • Header 10
  • Header 11
  • Header 12
  • Header 13
  • Header 14
  • Header 15
  • Header 16
  • Header 17
  • Header 18
  • Header 19
  • Header 20
  • Header 21
  • Header 22
  • Header 23
  • Header 24
  • Header 25
  • Header 26
  • Header 27
  • Header 28
  • Header 29
  • Header 30
  • Header 31
  • Header 32
  • Header 33
  • Header 34
  • Header 35
  • Header 36
  • Header 37
  • Header 38
  • Header 39
  • Header 40
Google Fonts Default