Link buttons are the most commonly used type of button. Whenever you need to style an ordinary link as a button, add the data-role=”button” attribute to the link (see Figure 4–1).
Figure 4–1. Link buttons
By default, buttons within the content section of a page are styled as block-level elements so they will fill the entire width of their outer container. However, if you want a more compact button that is only as wide as the text and icons inside, add the data-inline="true" attribute (see Listing 4–1).
Listing 4–1. Link buttons (ch4/link-buttons.html)<a href="#" data-role="button">Link button</a>
<a href="#" data-role="button" data-inline="true">Disagree</a>
<a href="#" data-role="button" data-inline="true">Agree</a>NOTE: If you want buttons to sit side-by-side and consume the entire width of the screen, use a 2-column grid. We will explore flexible grid layouts in more detail in Chapter 6. Specifically, for a 2-column grid layout refer to Listing 6-2.
Leave a Reply