Background
#1845728: Refactor and introduce generic button CSS styles for forms and links revamped and generalized the CSS for all possible buttons:
.button,
buttonNote: Seven does not implement styles for
.button.#1238484: [docs update] Ability to mark the form buttons to be of a specific type (so that they can be styled differently) advanced on it and introduced support for specific button "types":
<?php
$form['actions']['submit']['#button_type'] = 'primary';
$form['actions']['delete']['#button_type'] = 'danger';
?>
↓.button--primary { color: blue; }
.button--danger { color: red; }Relevant case study: http://www.lukew.com/ff/entry.asp?571
#button_style is not limited to 'primary' and 'danger'. The value is simply taken over as
.button--$valueCSS class name. See http://getbootstrap.com/css/#buttons for common button types.Note: Bartik does not implement styles for
.button--danger.Based on the last two building blocks, #1719640: Use 'button' element instead of empty links introduced dynamic/on-page buttons for JS interactions which masquerade as links, in order to avoid
<a href="#"></a>as well ashref="javascript:void(0)":<button type="button" class="link">Show summary</button>/**
* Show buttons as links.
*/
button.link {
background: transparent;
border: 0;
cursor: pointer;
margin: 0;
padding: 0;
}Note: Styling is broken in Bartik (faulty font override).
#216064: Entity form "Delete" button triggers server-side + HTML5 form validation; change "Delete" button to a link is about to convert all "Delete" buttons into links, so as to avoid HTML5 front-end form validation and needless back-end form processing code:
<?php
$actions['delete'] = array(
'#type'=> 'link',
'#title'=> $this->t('Delete'),
'#attributes'=> array(
'class'=> array('button', 'button--danger'),
),
);
?>
↓<a class="button button--danger" href=".../delete">Delete</a>Note: That patch will not adjust/fix the link button styles in Bartik/Seven.
Goal
Every button has a
.buttonclass or is a<button>or[type=submit]or[type=button].By default, every link in a form actions container has a
.buttonclass, so as to appear as a button. A theme is easily able to override this.Every link/button that (1) will trigger a confirmation for a destructive action or (2) immediately causes a destructive action uses
.button--danger. A theme is easily able to override this button type styling (in both places).