LCARS Buttons

This page is about adding LCARS style buttons to your pages, like the ones used for page navigation right below this paragraph. If you are looking for how to add buttons to the sidebar, please see this page. For sidebar 'panel buttons' please see this page.

HTML for Adding Buttons No Sound*

*Beginning with Version 24.2 LCARS can have "beeps" on button clicks for a more LCARS feel. Instructions will follow no-sound version.

You may want to add some LCARS style buttons to your web pages and it's really easy to do.

<div class="buttons">
	<a href="url">button 01</a>
</div>

button 01

So 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

Buttons with Sound

Creating buttons with sound is similar to the above method, only you will use the <button> element:

<div class="buttons">
	<button onclick="playSoundAndRedirect('audio1', '#')" class="name">a-01</button>
	<button onclick="playSoundAndRedirect('audio1', '#')" class="name">a-02</button>
</div>

NOTE: There are 4 audio files of LCARS keystrokes available for you to choose - beep1.mp3, beep2.mp3, beep3.mp3 and beep4.mp3. In the code above, 'audio1' selects beep1.mp3, 'audio2' would be for beep2.mp3 and so-on.

A Single Button with Sound

If you only need a single LCARS button, you can do it without the .buttons selector. Important! Please Note: The .buttons selector is what gives the buttons thier LCARS style; so when placing a single <button> outside the parent .buttons selector, you will need to include the class name of lcars-button...

<button onclick="playSoundAndRedirect('audio2', '#')" class="lcars-button">b-001</button>

Change Button Color

Note: The method to change a button's color depends on which version of LCARS you are running.

Version 24+

Works with both button element types -- <a href=""> and <button>.

<div class="buttons">
  <a href="url">default color</a>
  <a href="url" class="button-almond-creme">almond-creme</a>
  <button onclick="playSoundAndRedirect('audio2', '#')" class="button-bluey">bluey</button>
</div>

default color almond-creme

Note: For previous versions (before Version 24) simply drop the *button-* before the color name.

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

NOTE: The following method is for LCARS Version 24.2 and above. For previous versions of LCARS, replace 'justify' with 'jc'.

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

justify-center

BA-001 BB-002

Buttons that Align to the Right

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

BA-001 BB-002

a group of buttons that are spaced evenly

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

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

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

BA-001 BB-002 BB-003

Blinking Button

Works with both button element types -- <a href=""> and <button>.

<div class="buttons">
	<a href="#" class="blink">enable</a>
	<button onclick="playSoundAndRedirect('audio2', '#')" class="blink">engage</button>
</div>

enable

NOTE: For usability, the blinking stops on mouseover.

page last updated July 28, 2025