body {
    transition: background-color 0.5s ease;
    margin: 0;
    height: 100vh;
}

function changeBackground() {
  const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  document.body.style.backgroundColor = randomColor;
}
document.body.addEventListener('click', changeBackground);

.particle {
    position: absolute;
    background-color: #3498db;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: explode 1s linear;}
@keyframes explode { to { transform: scale(2); opacity: 0; }}

document.addEventListener("mousedown", (e) => e.preventDefault());
document.addEventListener("click", (e) => {
  const p = document.createElement("div");
  Object.assign(p.style, { left: `${e.clientX}px`, top: `${e.clientY}px` });
  p.className = "particle";
  document.body.appendChild(p);
  setTimeout(() => p.remove(), 1000); });

<div id="counter">0</div>

body {text-align: center; font-family: 'Segoe UI';}
#counter {
    font-size: 2.5em;
    cursor: pointer;
    padding: 10px 30px;
    border: 2px solid #3498db;
    border-radius: 10px;
    transition: background-color 0.3s;
    user-select: none;
    display: inline-block;
    color: #3498db;
}
#counter:hover {background-color: #3498db;color: #fff;}

let count = 0;
const counterElement = document.getElementById('counter');
counterElement.addEventListener('click', function() {
    count++;
    counterElement.textContent = count;
});

<div class="buttons">
    <button class="fill">Fill In</button>
    <button class="pulse">Pulse</button>
  </div>

body {
    color: #fff;
    background: hsl(227, 10%, 10%);
    text-align: center;
  }
button {  
    font-size: 20px;
    background: none;
    border: 2px solid;
    margin: 1em;
    padding: 1em 2em;
    color: var(--color);
    transition: 0.75s;
    cursor: pointer;
}
.fill:hover, .fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
  border-color: var(--hover);
  color: #fff;
}   
.pulse:hover, .pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
$colors: (fill: #a972cb, pulse: #ef6eae,);
@each $button, $color in $colors {
  .#{$button} {
    --color: #{$color};
    --hover: #{adjust-hue($color, 45deg)};
  }
}