Boutons - Berceau v3

Boutons & variations

Bouton par défautVariation n°1Variation n°2Bouton résaGros bouton résa

.fc-boutons {
	display: flex;
	flex-wrap: wrap;
  flex-direction: column;
  text-align: center;
	margin: 1rem 0;
	gap: 1rem 2rem;
}
.fc-boutons__btn {
  text-decoration: none;
  padding: .75rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: var(--radius);
}
.fc-boutons__btn:hover {
  transform: scale(1.05);
}

.is-style-1 {
  background-color: var(--gris);
  border: 1px solid var(--gris);
	color: var(--blanc);
}
.is-style-1:hover {
  background-color: transparent;
	color: var(--gris);
}
.is-style-2 {
  border: 1px solid var(--orange);
	color: var(--orange);
}
.is-style-2:hover {
  background-color: var(--orange);
	color: var(--blanc);
}

.is-style-resa {
  background-color: var(--orange);
	color: var(--blanc);
}
.is-style-resa:hover {
  background-color: var(--gris);
	color: var(--blanc);
}
.is-style-resa.big {
  padding: 1.25rem 2rem;
  font-weight: bold;
}

Customisation

Bouton défaut avec custom bgBouton défaut avec custom txtBouton défaut full customBouton full custom

bouton1