Remove padding

Buttons

Arrow is CSS-generated — no inner markup required. Renders template-parts/atoms/button.

.btn--primary Orange pill expands on hover → white text. Use on light/white backgrounds.

.btn--secondary White pill expands on hover → orange text. Use on orange backgrounds.

.btn--secondary--green White pill expands on hover → green text. Use on green backgrounds.

.btn--secondary--blue White pill expands on hover → blue text. Use on blue backgrounds.

.btn--secondary--purple White pill expands on hover → purple text. Use on purple backgrounds.

Playground

Change a value below to update the preview live.

get_template_part( 'template-parts/atoms/button', null, [
    'version'            => 'primary', // primary | secondary | secondary--green | secondary--blue | secondary--purple
    'link_text'          => 'Read More',
    'link_url'           => 'https://example.com',
    'link_aria_label'    => '', // optional
    'link_open_new_tab'  => false, // optional
    'id'                 => '', // optional
    'classes'            => '', // optional, appended alongside the btn/btn--<version> classes
] );

Playground

Usage