Features
April 8, 2025

How to Create a Custom HTML CTA in Teachable | Step-by-Step Tutorial

The code for our YouTube video of the same name.

The HTML code (including CSS) for the Teachable Call-To-Action Section

Our YouTube video can be found here on how to create a simple Call-To-Action block, but to do it properly, we must change the default Teachable button to one we create ourselves using HTML.

Here is the small snippet of HTML code needed.

＜style＞
.group-button { padding: 10px 0 60px; 0; display: flex; align-items: center; justify-content: center; background: #6161FF; }
.group-button .custom-btn { display: inline-block; background: #F64F59; color: white; padding: 15px 40px; width: 250px; text-align: center; font-size: 16px; font-weight: 700; border-radius: 50px; }
＜/style＞
＜div class="group-button"＞
  ＜a class="custom-btn" href="#pricing-options"＞
    Sign Up
  ＜/a＞
＜/div＞
Free Engineering Resource

The Teachable Infrastructure Checklist

Download the exact architectural framework I use to audit, stabilize, and scale 6- and 7-figure Teachable ecosystems.

  • Find the hidden API and webhook errors that are silently failing.
  • Audit your staff permissions to close critical security gaps.
  • Map your exact data flow from Teachable to your CRM safely.

Get the framework

Loading secure form...
Back to Blog