Teft styling for WordPress Buttons Block buttons and custom buttons with the .teft-button class. Override default WordPress colors, sizing and border radius with Teft custom properties.
Install the module
npm install @teft/buttons| Name | Default value | Explanation |
|---|---|---|
--teft-buttons-primary-color |
var(--teft-theme-primary-color, #1897ec) |
Background color for primary button. Inherit color from theme package. |
--teft-buttons-text-color |
var(--teft-theme-on-primary-color, #fff) |
Text color for primary button. Inherit color from theme package. |
--teft-buttons-outlined-color |
var(--teft-buttons-primary-color) |
Text and border color for button with outlined style. |
--teft-buttons-disabled-color |
var(--teft-theme-disabled-color, #ccc) |
Background color for disabled buttons. Inherit color from theme package. |
--teft-buttons-disabled-text-color |
var(--teft-theme-on-primary-color, #fff) |
Text color for disabled buttons. Inherit color from theme package. |
--teft-buttons-border-radius |
6.25em |
Button burder radius. |
<div class="wp-block-buttons">
<div class="wp-block-button"><a class="wp-block-button__link" href="#">Primary Button</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" href="#">Outlined Button</a></div>
</div>
<a href="#" class="teft-button">Primary Teft Button</a>
<input type="button" class="teft-button teft-button--secondary" value="Teft Button Secondary" />
<input type="button" class="teft-button teft-button--alert" value="Teft Button Alert" />
<button type="submit" class="teft-button teft-button--success">Teft Button Success</button>
<button type="button" class="teft-button teft-button--warning">Teft Button Warning</button>
<button type="button" class="teft-button teft-button--warning" disabled>Teft Button Warning :disabled</button>