Atomic has-built in reusable button CSS classes that we can use in creating HubSpot CTAs.
Button Shape
All buttons require atmc-btn class to control the basic shape.
Button Styles
In addition to atmc-btn, there also lots of reusable classes:
Solid button
Format: atmc-btn-[color]
Complete list:
- atmc-btn-primary
- atmc-btn-secondary
- atmc-btn-base
- atmc-btn-danger
- atmc-btn-warning
- atmc-btn-success
- atmc-btn-gray
- atmc-btn-lightgray
- atmc-btn-white
- atmc-btn-light
- atmc-btn-dark
Outline button
Format: atmc-btn-outline-[color]
Complete list:
- atmc-btn-outline-primary
- atmc-btn-outline-secondary
- atmc-btn-outline-base
- atmc-btn-outline-danger
- atmc-btn-outline-warning
- atmc-btn-outline-success
- atmc-btn-outline-gray
- atmc-btn-outline-lightgray
- atmc-btn-outline-white
- atmc-btn-outline-light
- atmc-btn-outline-dark
Usage