Agenda Cultural - Lima Perú

Buttons

Buttonclass=""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

Get the code

<button class="btn">Default</button><button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-inverse">Inverse</button>

Buttons for actions

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

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.

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.

Multiple sizes

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


Disabled state

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

Primary link Link

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

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 you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

  • Curabitur quis
  • Quisque congue
  • Vestibulum dignissim
  • Donec eget
  • Class aptent
  • Mauris gravida
  • Proin placerat

About us

Nullam congue dui at sem tincidunt a egestas justo pharetra. Curabitur et leo elit, id condimentum justo. Vivamus et molestie risus? Proin luctus turpis id lorem euismod gravida. Mauris lacinia sapien sed magna dignissim non ultrices metus euismod. Donec malesuada ante eu leo accumsan tristique. Cras vulputate, mauris sit amet sollicitudin feugiat; massa leo rhoncus nibh, vitae malesuada felis velit at enim. remaining essentially is unchanged.

Location Services

No. 304, the building 17T3,Trung Hoa Nhan Chinh, Hanoi Working from 8am - 17 pm daily Weekends from 8am - 12pm

Contact us

If you want to support, please call hot line:19001089 or send email to: This email address is being protected from spambots. You need JavaScript enabled to view it.

Top of Page