Concrete Staircase
$2900
In stock
STEP HEIGHT
Dark theme button styles for gradient-nostalgic folks.
GitHub: kalgynirae/great-ient-buttons
Simply copy buttons.css into your project. Visit GitHub to download the latest release.
Add the gb-button class to <button> or <a> elements.
<button class="gb-button">regular button</button> <a class="gb-button" href="#"><a> button</a> <button class="gb-button gb-big">big button</button> <button class="gb-button active">active button</button> <button class="gb-button" disabled>disabled button</button>
Buttons can be stacked in a compact row by adding gb-row to the parent element. Rows can optionally begin or end with a gb-label to indicate their function.
Note: Button rows automatically switch to a vertical orientation at small device widths.
<div class="gb-row"> <div class="gb-label"><svg ...>...</svg></div> <button class="gb-button"><svg ...>...</svg></button> <button class="gb-button">1</button> <button class="gb-button">2</button> <button class="gb-button">3</button> <button class="gb-button">Long text blah blah</button> <button class="gb-button" disabled>disabled</button> </div>
<div class="gb-row gb-stretch"> <div class="gb-label"><svg ...>...</svg></div> <button class="gb-button"><svg ...>...</svg></button> <button class="gb-button">1</button> <button class="gb-button">2</button> <button class="gb-button">3</button> <button class="gb-button">Long text blah blah</button> <button class="gb-button" disabled>disabled</button> </div>
You can add the gb-{color} classes to buttons directly or to any parent element.
For example, this page's color selector changes the <body> element's class.
<div>
<button class="gb-button">button</button>
<button class="gb-button gb-gray">gray button</button>
<span class="gb-purple">
<button class="gb-button">purple button</button>
</span>
</div>
Note: This example has not been adapted for narrow device widths.