Candy Buttons Lab Logo

Where buttons are born from pure imagination and scientific precision.

Ingredient Station

16px
100% opacity
100% opacity
100% opacity
8px
Blur: 6px
0.3s
0ms

Testing Chamber

Run Random Experiment
Discover new formulas!

HTML Formula

<button class="candy-button">
  Simple Button
</button>

CSS Compound

.candy-button {
  padding: 12px 24px;
  background: #6750a4;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease 0s;
}

.candy-button:hover {
  background: #7c4dff;
  color: #6750a4;
}