A call-to-action is a button that asks someone to do one specific thing: buy a product, subscribe to a service, sign up for a newsletter, or download something. On a landing page, it turns “That sounds neat” into a next step. section 10.1 section 10.5
Put the button alongside the product information in the header, where visitors can see the product name, short introduction, price, and the action you want them to take. A striking hero image can set the scene, but it should not make the text—or the button—hard to read. section 10.5
A button with a clear request
For a fictional book sale, the label “I Want It!” gives the button a direct job. The button uses the btn class, while CSS removes the border, adds padding, inherits the page font, makes the text bold and white, and gives it a dark-orchid background. section 10.5
.btn { #1
border: none; #1
padding: .75em 1.25em; #1
font-family: inherit; #1
font-size: 1em; #1
font-weight: bold; #1
color: white; #1
background-color: darkorchid; #1
} #1
Inspect the reusable btn rule that gives a call-to-action button its visible button styling. section 10.5
For a simple call-to-action button:
- Choose the action first: buying, subscribing, or downloading. section 10.5
- Write a label that asks for that action, such as “I Want It!” or “Order Now!” section 10.5
- Apply a shared button class so calls to action look consistent across the page. section 10.5
