Challenge: Button Style

by David Joseph Guzsik

HTML

<h1>Button Challenge - Toggle Button</h1>

<button class="btn btn-primary" id="toggleButton">Amazing Button!</button>

<!-- To be followed -->
<img class="example-image" src="https://assets.justinmind.com/wp-content/uploads/2020/07/button-state-design-ui.png" width="600">

SCSS

/* Implement the style here */

$primary: #d0d;

.example-image {
  display: block;
  margin-top: 1rem;
}

.btn {
  appearance: none;
  font-family: sans-serif;
  padding: 1em 3em;
  border: 1px solid transparent;
  border-radius: 3px;
  
  &:active {
    opacity: .85;
  }
  
  &.btn-primary {
    background-color: $primary;
    color: white;
    
    &:hover {
      background-color: darken($primary, 10%);
    }
    
    &:active {
      background-color: transparent;
      border-color: $primary;
      color: $primary;
    }
    
    &.btn-primary--active {
      background-color: lighten($primary, 50%);
    }
  }
}

JavaScript

const toggleButton = document.getElementById('toggleButton');
let isToggled = false;

toggleButton.addEventListener('click', function() {
    isToggled = !isToggled;

    if (isToggled) {
        toggleButton.classList.add('btn-primary--active');
    } else {
        toggleButton.classList.remove('btn-primary--active');
    }
});