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

button 01

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 01 button 02 button 03

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 top row
bottom row

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>

button 01 button 02 button 03

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.