WP ULike
Get Pro

Button Templates Customizer

Style like buttons and counters with live preview — colors, borders, spacing, and icons per state.

Change how buttons look without writing CSS. The customizer updates in real time so you see exactly what visitors get.

WP ULike → Customize → Button Templates

Pick a template under Settings → Content Types first (heart, thumb, etc.), then fine-tune it here.

Template wrapper

The outer box around the whole button group.

ControlWhat it does
Typography
Font for the wrapper (size, weight, family).
Normal / Hover / Active tabs
Style each interaction state separately.
Background
Wrapper background color per state.
Border
Border color, width, and radius per state.
Padding
Space inside the wrapper.
Margin
Space outside the wrapper — separates the button from surrounding content.

Button group

The clickable like (and dislike Pro) buttons themselves.

ControlWhat it does
Normal / Hover / Active tabs
Colors and borders for each state — including the “already liked” active look.
Text color
Label color when using text buttons.
Background
Button fill color per state.
Border
Outline per state.
Icon dimensions
Width and height of image icons (Normal tab).
Like icon images
Custom images for default, hover, and active like states.
Dislike icon images
Same for dislike buttons Pro.
Button dimensions
Overall button width and height.
Padding & margin
Inner and outer spacing for the button.
Alignment
Align the button group left, center, or right.

Counter group

The number next to the button (or inside it, depending on template).

ControlWhat it does
Normal / Active tabs
Style for default and “user has voted” counter states.
Text, background, border
Colors per state.
Padding & margin
Spacing around the count.

Tips

  • Start with one state — set Normal first, then copy tweaks to Hover and Active.
  • Image buttons — upload icons under the Button group; they override the default SVG.
  • Theme conflicts — if something still looks wrong, add a small override under Settings → Developer Tools → Custom CSS.

Related: Toast Notifications · Developer Tools & Scripts

Related articles

Continue with these guides