Examples#

UX4G comes with a variety of predefinedbuttonstyles,each having a distinct semantic function and a few extras for further control.

<button type="button"class="btn btn-primary">Primary</button><button type="button"class="btn btn-secondary">Secondary</button><button type="button"class="btn btn-success">Success</button><button type="button"class="btn btn-danger">Danger</button>

RESULT

UX4G comes with a variety of predefined button styles ripple effects.

<button type="button"class="btn btn-primary ripple-button">Primary</button><button type="button"class="btn btn-secondary ripple-button">Secondary</button><button type="button"class="btn btn-success ripple-button">Success</button><button type="button"class="btn btn-danger ripple-button">Danger</button>

Add this custom js for ripple effect.

function createRipple(event) {
  const button = event.currentTarget;
  
  // Remove existing ripple if it exists for a clean start
  const existingRipple = button.querySelector(".ripple-effect");
  if (existingRipple) {
    existingRipple.remove();
  }

  const circle = document.createElement("span");
  const diameter = Math.max(button.clientWidth, button.clientHeight);
  const radius = diameter / 2;

  circle.style.width = circle.style.height = `${diameter}px`;
  circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;
  circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;
  circle.classList.add("ripple-effect");

  button.appendChild(circle);

  // Remove the ripple effect after the animation ends
  setTimeout(() => {
    circle.remove();
  }, 600);
}

document.querySelectorAll(".ripple-button").forEach(button => {
  button.addEventListener("click", createRipple);
});

RESULT

Conveying meaning to assistive technologies

Color-coding to add meaningjust gives a visual cue,which users of assistive technologies like screen readers won't be able to understand. Make sure the information the color designates is either evident from the content itself (such as the visible text) or is included in another way, such as by hiding additional text using the .visually-hidden class.

Disable text wrapping #

It is possible to give the button .text-nowrap class if it doesn't want the button text to wrap.In Sass,anyone may prevent text wrapping for each button by setting$btn-white-space:nowrap.

Button tags#

The<button>element is intended to be used in conjunction with the.btnclasses.The<a>and<input>elements can also utilize these classes,albeit some browsers may apply a slightly different rendering.

Instead of linking to new pages or sections within the current page when using button classes on<a>elements that are used to activate in-page functionality(like collapsing content),these links should be given arole="button"to clearly communicate their function to assistive technologies like screen readers.

<a class="btn btn-primary"href="#"role="buttolt;/a><button class="btn btn-primary ripple"type="submit">Button</button><input class="btn btn-primary"type="button"value="Input"/><input class="btn btn-primary"type="submit"value="Submit"/><input class="btn btn-primary"type="reset"value="Reset"/>

RESULT

Outline buttons#

In need of a button? But, don't want the strong backdrop colors they bring. To exclude all background colors and pictures from any button, substitute the .btn-outline-* modifier classes for the default ones.

                                                                
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
                                                            

RESULT

Sizes #

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
    <button type="button" class="btn btn-secondary btn-lg">Large button</button>

RESULT

<button type="button" class="btn btn-primary btn-sm ">Small button</button>
    <button type="button" class="btn btn-secondary btn-sm ">Small button</button>

RESULT

You can even roll your own custom sizing with CSS variables:

<button type="button" class="btn btn-primary"
>
Custom button
</button>

RESULT

Disabled state #

Add the disabled boolean attribute to any button element to make buttons appear inactive. Pointer-events: none are applied to disabled buttons, preventing the activation of hover and active states.

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

RESULT

The <a> element's disabled buttons have a somewhat different behavior:

• The disabled attribute is not supported by<a>s,thus must add the.disabled class to make it visually appear disabled.
• There are several styles that can be used in the future to disable all pointer-events on anchor buttons.
• A disabled button should have thearia-disabled="true"attribute to let assistive technologies know that it is disabled.
• The href property should not be used on disabled buttons utilizing the<a>tag.

Link functionality caveat#

To cover cases where you have to keep thehrefattribute on a disabled link,the.disabledclass usespointer-events:noneto try to disable the link functionality of<a>s.Note that this CSS property is not yet standardized for HTML,but all modern browsers support it.In addition,even in browsers that do supportpointer-events:none,keyboard navigation remains unaffected,meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links.So to be safe,in addition toaria-disabled="true",also include atabindex="-1"attribute on these links to prevent them from receiving keyboard focus,and use custom JavaScript to disable their functionality altogether.

<a href="#"class="btn btn-primary ripple disabled"tabindex="-1"role="button"aria-disabled="!0">Primary link</a><a href="#"class="btn btn-secondary disabled"tabindex="-1"role="button"aria-disabled="!0">Link</a>

RESULT