# Buttons & Links > Primary, secondary and text-link buttons on renovare.org, the versions for dark bands, hover behavior and ordering rules. *One solid button, then outlines, then links.* ## Primary Hover: the fill darkens to Primary 600 and grows to 110%. On the live site the button also follows the cursor slightly (magnetic hover). Site partial: `_components/buttons/button_primary` ```html Join Email Community ``` ## Secondary Site partial: `_components/buttons/button_secondary` ```html Learn More ``` ## Text link Hover: a dark line wipes in over the green underline, left to right. Site partial: `_components/buttons/button_tertiary` ```html Explore ``` ## Groups First button solid, the rest outlined, then text links. ```html
Register See the Schedule Read the FAQ
``` ## On dark bands On Green, Navy and Plum bands. The solid button turns white with dark text. Shown on: green background. ```html
Give Monthly Learn More Read the Story
``` ## Rules - **One primary button per group.** The first button is solid; any others are outlined; extra options are text links. - Labels are Title Case, two to four words, starting with a verb where possible: “Join Email Community,” “Watch Replay.” - Never put buttons inside rich text; add them as a Buttons block. - Don't change button colors to match an accent. Buttons are always green, white or outlined. - Every button needs a visible focus state (the thicker border shown when tabbing).