ejemplo con metodologia css bem

 ¡Claro! Aquí tienes un ejemplo con tres elementos y tres modificadores para button, siguiendo la metodología BEM correctamente.

---

🎨 Estructura BEM para button

🏗 Bloque (Block)

css
.button {
  padding: 10px 20px;
  border: none;
  background: blue;
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

---

🎯 Elementos (__ - Partes del botón)

css
.button__icon {
  margin-right: 8px;
  font-size: 18px;
}

.button__text {
  font-weight: bold;
}

.button__loader {
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

🔹 Explicación:

• .button__icon → Ícono dentro del botón.
• .button__text → Texto del botón.
• .button__loader → Loader girando dentro del botón.

---

🎨 Modificadores (-- - Variaciones del botón)

css
.button--large {
  padding: 15px 30px;
  font-size: 18px;
}

.button--disabled {
  background: gray;
  cursor: not-allowed;
  opacity: 0.6;
}

.button--outline {
  background: transparent;
  border: 2px solid blue;
  color: blue;
}

🔹 Explicación:

• .button--large → Botón más grande.
• .button--disabled → Botón deshabilitado.
• .button--outline → Botón con borde en lugar de fondo sólido.

---

📌 Ejemplo en HTML

html
<button class="button button--large">
  <span class="button__icon">🔍</span>
  <span class="button__text">Buscar</span>
</button>

<button class="button button--outline">
  <span class="button__text">Registrarse</span>
</button>

<button class="button button--disabled">
  <span class="button__loader"></span>
  <span class="button__text">Cargando...</span>
</button>

---

🚀 Resumen

Tipo	Nombre	Explicación
Bloque	.button	El botón en sí
Elemento	.button__icon	Ícono dentro del botón
Elemento	.button__text	Texto del botón
Elemento	.button__loader	Loader giratorio dentro del botón
Modificador	.button--large	Botón más grande
Modificador	.button--disabled	Botón deshabilitado
Modificador	.button--outline	Botón con borde en lugar de fondo

Así