screen top
02-262000
101
7109
1966
1222
2020
1444
102
1103
1935
1940
708
M113
1956
1209
102
8102
1987
044
0051
607
1976
1031
1984
1954
1103
415
1045
1864
103
714
1993
0222
052
1968
2450
746
56
47
716
8719
417
602
104
6104
1995
322
89
1931
1701
51
29
218
908
2114
85
3504
105
08
2001
713
079
1940
LV
426
105
10
1206
1979
402
795
106
31
2017
429
65
871
1031
541
656
764
88
001
27
05
03-111968
04-041969
05-1701D
06-071984
07-081940
08-47148
09-081966
10-31

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.