LCARS Buttons
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 No Sound*
You may want to add some LCARS style buttons to your web pages and it's really easy to do.
HTML:
OUTPUT:
So every <a> tag (hyperlink) inside the "buttons" div becomes a button:
HTML:
OUTPUT:
Change Button Color
Note: The method to change a button's color depends on which version of LCARS you are running.
Version 24+
HTML:
OUTPUT:
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.
Buttons that Align to the Right
jc-flex-end
Note: Buttons align to the left by default.
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.
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.
a group of equally spaced buttons
jc-space-around
Buttons are evenly distributed in the line with equal space around them.
Blinking Button
<div class="buttons">
<a href="some-url" class="blink">enable</a>
</div>
NOTE: For usability, the blinking stops on mouseover.
page last updated november 23, 2024