.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)};
  }
}

<ul class="complete">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <ul class="incomplete">
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

ul { list-style: none; }
.complete li::before {
    content: '🗹 '; 
}
.incomplete li::before {
    content: '☐ '; 
}
ul {
    text-align: center;
    font-family: Candara;
    font-size: 1.7rem;
    margin: 0 auto;
}

  <input type="checkbox"/> <br>
<img src="https://source.unsplash.com/random/1920x1080" alt="Random" />

input {
    transform: scale(4);
    display: block;
    margin: 30px auto;
  }
  img {
    display: block;
    margin: 0 auto;
    width: 1400px;
    height: 900px;
    transition: 2s;
  }
  input:checked + br + img {
    width: 500px;
    height: 400px;
    object-fit: cover;
    object-position: left-top;
    transition: width 2s, height 3s;
  }