SASS Buttons Solved
SASS Buttons: Solved Runners
Every runner from the lesson, solved with only ocs__btn classes.
Popcorn Hack 1: Base Button
ocs__btn added to the link.
View example code
<a class="ocs__btn" href="https://www.mygoodbrain.org/resources">Mental Health Resource Directory</a>Popcorn Hack 2: Modifiers & Group
pill + fill on the check-in button, both actions grouped in ocs__links.
View example code
<div class="ocs__links">
<button class="ocs__btn pill accent fill">Complete Daily Check-In</button>
<a class="ocs__btn outline" href="">Save Draft Journal</a>
</div>Popcorn Hack 3: Tones & Wide Bar
Green check-in, filled crisis link, wide container.
View example code
<div class="ocs__links ocs__links--wide">
<button class="ocs__btn alert-green outline">Complete Check-In</button>
<a class="ocs__btn alert-red fill" href="https://www.mygoodbrain.org/resources">Get Crisis Support</a>
</div>Homework Hack 1: Adaptive Resource Toolbar
Three tone-matched actions inside ocs__links.
View example code
<div class="ocs__links">
<a class="ocs__btn alert-red fill pill" href="https://www.mygoodbrain.org/resources">Urgent Support</a>
<a class="ocs__btn alert-green fill pill" href="https://www.mygoodbrain.org/resources">Self-Care</a>
<a class="ocs__btn accent outline pill" href="https://www.mygoodbrain.org/resources">Community</a>
</div>Homework Hack 2: Action Hierarchy
Primary fill, secondary outline, alert outline.
View example code
<div class="ocs__links">
<button class="ocs__btn accent fill">Log Mood Entry</button>
<a class="ocs__btn outline" href="https://www.mygoodbrain.org/resources">View Weekly Trends</a>
<a class="ocs__btn alert-red outline" href="https://www.mygoodbrain.org/resources">Crisis Hotline</a>
</div>