Buttons
You may want to add some LCARS style buttons to your web pages and it's really easy to do.
HTML
<div class="buttons">
<a href="url">button 01</a>
</div>
Output
Every <a> tag (hyperlink) inside the "buttons" div magically becomes a button. And you can add pretty much all the buttons/hyperlinks you want inside the buttons div.
<div class="buttons">
<a href="url">button 01</a>
<a href="url">button 02</a>
<a href="url">button 03</a>
</div>
Button with 2 lines of text
You may run into the situation where you have too much text for the size of your button. Add the class "two-rows" to the *a* tag and the resulting font will be smaller and the padding inside the button will allow for 2 rows of text. Just remember to include the <br> tag to separate the two rows of text.
<div class="buttons">
<a href="url" class="two-rows">button top row<br>bottom row</a>
</div>
Button Colors
The default button color for the Classic LCARS color theme is #CC88FF (class name "african-violet"). You can easily change the color of a button by simply adding a color class name to the <a> tag.
<div class="buttons">
<a href="url">button 01</a>
<a href="url" class="sunflower">button 02</a>
<a href="url" class="bluey">button 03</a>
</div>
There are several color options which you will find in the Color Guide along with their class names.
NOTE
Any text you place in a button in HTML will automatically display in uppercase letters.
Sidebar Buttons
With the release of LCARS 7.1 you can now add buttons to the sidebar. HTML instructions are here.