• Call Us: 0111 222 333
  • Mail: info@domain.com
Professional DNN Responsive Theme
Professional DNN Responsive Theme
Go to...
  • Home
    • BoxedVersion
      • BoxedInner Page
    • Home Version 1
    • Home Version 2
    • Home Version 3
    • Home Version 4
    • Home Version 5
    • Home Version 6
    • Home Paralex 7
    • Home Video 8
    • Home Version 9
    • Home Version 10
    • Home Version 11
    • Home Version 12
  • Colors
    • Blue Colors
      • CadetBlue
      • Aqua Blue
      • Dodger Blue
      • Slategrey
      • MidnightBlue
    • Turquoise
    • Chocolate
    • Green
    • Olive Green
    • Orange
    • Purple
    • Red
    • Brown
    • Lime Green
    • Pink
  • Menu Option
    • Mega Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Standard Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Left Side Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
  • Sliders
    • Touch Layer Sliders
      • Slider Example 01
      • Slider Example 02
      • Slider Example 03
    • Responsive Nivo Slider
    • Responsive Flex Slider
    • Responsive Bx Slider
  • Features
    • Bootstrap Componentes
      • Global settings
      • Typography
      • Button groups
      • Buttons
      • Code
      • Images
      • Alerts
      • Tables
    • Others
      • Video Shortcode
      • Promo Box
      • Highlighted Text
      • Dividers Gaps
      • Media object
      • Teasers
      • Testimonials
      • Font Awesome Icons
    • Headers
      • Header1 - RightMenu
      • Header2 - CenterMenu
      • Header3 - LeftMenu
      • Header4 - NoTopbar
      • Header5 - Optional
      • Header6 - Optional
      • Header7 - Optional
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Footers
      • Footer Version 1
      • Footer Version 2
      • Footer Version 3
      • Footer Version 4
      • Footer Version 5
      • Footer Version 6
    • Accordion
    • User Interfaces
    • CSS3 Animation Content
    • Carousel
    • Portfolio
  • Pages
    • Left Side Pages
    • Right Side Pages
    • About Us
    • Meet the Team
    • Coming Soon
    • Pricing Table
    • Services
    • Career
    • FAQ
    • Our Office
    • 404 Page
    • Blank Pages
  • Containers
    • Blue Containers
      • CadetBlue Container
      • Aqua Blue Container
      • Dodgerblue Container
      • Slategray Container
      • MidnightBlue Container
    • Turquoise Container
    • Chocolate Container
    • Green Container
    • Olivegreen Container
    • Orange Container
    • Purple Container
    • Red Container
    • Brown Container
    • Limegreen Container
    • Pink Container
  • Contact Us
  • Home
    • BoxedVersion
      • BoxedInner Page
    • Home Version 1
    • Home Version 2
    • Home Version 3
    • Home Version 4
    • Home Version 5
    • Home Version 6
    • Home Paralex 7
    • Home Video 8
    • Home Version 9
    • Home Version 10
    • Home Version 11
    • Home Version 12
  • Colors
    • Blue Colors
      • CadetBlue
      • Aqua Blue
      • Dodger Blue
      • Slategrey
      • MidnightBlue
    • Turquoise
    • Chocolate
    • Green
    • Olive Green
    • Orange
    • Purple
    • Red
    • Brown
    • Lime Green
    • Pink
  • Menu Option
    • Mega Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Standard Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Left Side Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
  • Sliders
    • Touch Layer Sliders
      • Slider Example 01
      • Slider Example 02
      • Slider Example 03
    • Responsive Nivo Slider
    • Responsive Flex Slider
    • Responsive Bx Slider
  • Features
    • Bootstrap Componentes
      • Global settings
      • Typography
      • Button groups
      • Buttons
      • Code
      • Images
      • Alerts
      • Tables
    • Others
      • Video Shortcode
      • Promo Box
      • Highlighted Text
      • Dividers Gaps
      • Media object
      • Teasers
      • Testimonials
      • Font Awesome Icons
    • Headers
      • Header1 - RightMenu
      • Header2 - CenterMenu
      • Header3 - LeftMenu
      • Header4 - NoTopbar
      • Header5 - Optional
      • Header6 - Optional
      • Header7 - Optional
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Footers
      • Footer Version 1
      • Footer Version 2
      • Footer Version 3
      • Footer Version 4
      • Footer Version 5
      • Footer Version 6
    • Accordion
    • User Interfaces
    • CSS3 Animation Content
    • Carousel
    • Portfolio
  • Pages
    • Left Side Pages
    • Right Side Pages
    • About Us
    • Meet the Team
    • Coming Soon
    • Pricing Table
    • Services
    • Career
    • FAQ
    • Our Office
    • 404 Page
    • Blank Pages
  • Containers
    • Blue Containers
      • CadetBlue Container
      • Aqua Blue Container
      • Dodgerblue Container
      • Slategray Container
      • MidnightBlue Container
    • Turquoise Container
    • Chocolate Container
    • Green Container
    • Olivegreen Container
    • Orange Container
    • Purple Container
    • Red Container
    • Brown Container
    • Limegreen Container
    • Pink Container
  • Contact Us
Select the search type
  • Site
  • Web
Search

Buttons

Features / Bootstrap Componentes / Buttons

Buttons

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.

Copyright 2025 by Professional : Terms Of Use : Privacy Statement
  • Register
Login