LCARS Buttons

HTML for adding buttons 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

Change Button Color

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

Version 24


						<div class="buttons">

						  <a href="url">default color</a>

						  <a href="url" class="button-almond-creme">almond-creme</a>

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

						</div>

default color almond-creme bluey

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

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 november 23, 2024