Mini-Pattern: Link Button

Pattern Documentation

Theme Modifiers (CSS, Javascript)

This pattern styling is affected by modifiers; see the Kadence Build Strategy Documentation.

Here are the classes that affect this pattern:

  • btn-link

CSS styles applied to every button block that displays an arrow after text on hover/focus. Because of this, icons should NOT be added to button block after the text.

Kadence Modification Notes

  • Small Link Button:
    • Button Inherit Styles: Fill
    • Button Size: SM
    • Button Width: Auto
    • Background: Transparent
    • Border: none
    • Border Radius: 0px all sides
    • Font-size: 11px
    • Line-height: 1
    • Font-weight: 500
    • Letter-spacing: 0.22px
    • Padding: 0px all sides
  • Default Link Button:
    • Button Inherit Styles: Fill
    • Button Size: MD
    • Button Width: Auto
    • Background: Transparent
    • Border Radius: 0px all sides
    • Font-size: 16px
    • Line-height: 1
    • Font-weight: 500
    • Letter-spacing: 0.24px
    • Padding: 0px all sides
  • Large Link Button:
    • Button Inherit Styles: Fill
    • Button Size: LG
    • Button Width: Auto
    • Background: Transparent
    • Border Radius: 0px all sides
    • Font-size: 18px
    • Line-height: 1
    • Font-weight: 500
    • Letter-spacing: 0.18px
    • Padding: 0px all sides

Pattern Library Organization

  • Categories: Buttons
  • Search Keywords: button, link button, icon button