Strikethrough Price in Buttons

What You'll Create

A button that displays a strikethrough price alongside the current price, perfect for sales and promotional offers. The original price appears crossed out to emphasize the discount.

The Problem It Solves

Squarespace buttons only support plain text. When you're running a sale and want to show the original price crossed out next to the new price, you need to use HTML tags in the button text and CSS to style the strikethrough.

Perfect For

Sales pages, Promotional offers, Course launches, Limited-time deals, Discount campaigns

What Makes This Different

This technique uses the HTML em tag within button text to wrap the original price, then CSS applies text-decoration:line-through to that element. Simple but effective for creating urgency and showing value.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Button block

• Toolkit Title: Strikethrough in Buttons

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support