LCARS Buttons

start here • html for
adding buttons button with 2
rows of text change button
color button layouts blinking button

This page is about adding LCARS style buttons to your pages, like the ones you see right above. If you are looking for how to add buttons to the sidebar, please see this page.

HTML for Adding 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 becomes a button.


						<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 rows 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

Change Button Color

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">default color</a>

						  <a href="url" class="sunflower">sunflower</a>

						  <a href="url" class="bluey">bluey</a>

						</div>

default color sunflower bluey

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.

Button Layouts

Use the following class selectors (shown in orange) in the parent *buttons* DIV to position a button or group of buttons. Note that buttons will wrap at smaller viewport sizes. Positioning classes work in all themes.

center one or more buttons

jc-center
Note: *jc* stands for justify content.

BA-001 BB-002

Buttons that Align to the Right

jc-flex-end
Note: Buttons align to the left by default.

BA-001 BB-002

a group of buttons that are spaced evenly

jc-space-evenly
Buttons are distributed so that the spacing between any two adjacent alignment buttons, before the first alignment button, and after the last alignment button is the same.

BA-001 BB-002 BB-003

a group of buttons that fill a line

jc-space-between
Buttons are evenly distributed in the line; first button is on the start of the line, last button on the end of the line.

BA-001 BB-002 BB-003

a group of equally spaced buttons

jc-space-around
Buttons are evenly distributed in the line with equal space around them.

BA-001 BB-002 BB-003

Blinking Button


						<div class="buttons">

						  <a href="some-url" class="blink">enable</a>

						</div>

enable

NOTE: For usability, the blinking stops on mouseover.

page last updated september 10, 2023