Button(s) Element

Make your website interactive.

Overview

Buttons are used for interactions with the user. In Mame except from forms they are mostly used as more visible link replacement. They have two color types, background and text color.

Usage Examples

  • Call to Action (e.g. Contact us, Buy now..).
  • Form Interactions (Submit forms, Login..).
  • Highlighting content

Properties

Shared Properties
  1. Display as Group: If you have multiple buttons you can display them as group, which removed the margin between them.
Button Properties
  1. Button Text: Text displayed on the button
  2. Link Type: Should the button link to another page or different website? If yes is it an internal website link or an external site.
  3. Button Size: Set the size of the button. Default is 100. 
  4. Fixed Width: Set a custom size (text is centered) for the button. If you want to reset it, just set the value to zero (auto).
  5. Button Color Style: Set the color of the button. You can choose between your sites default colors or set a custom background and text color.
Everything else can be configured with the general properties. 
Buttons Element Properties Visualization

See it in action

Interactions and Accessibility

Users can navigate through the buttons (with link) by pressing Tab and open the target page by pressing Enter

Generated HTML


<div class="mame-element mame-buttons">
   <a href="https://mame.app" class="button primary" rel="noopener nofollow" style="x:100" role="button" aria-pressed="false">A simple button</a>
</div>

Style / CSS Selectors


.mame-buttons {
  /* The Button Container */
}

.mame-buttons .button {
  /* All Button Items */

Read more in the bonsai.css documentation

JavaScript

Buttons are implemented in plain HTML 5 and CSS 3. They don't need any JavaScript to work properly.

Was this article helpful?