Botones (Sass/CSS)

Aunque ed-grid no pretende incluir elementos de UI (que se incluirán en el futuro proyecto ed-ui), por el momento incluye botones y menu pensando en el prototipado rápido.

Uso con CSS (cssCore)

Use la clase button. Puede añadir las clases round o radius para bordes redondeados.

Para controlar el tamaño del botón, cambie manualmente el font-size por CSS. Si desea cambiar los colores, haga lo mismo en su CSS personalizado.

<!-- version con css -->
<a href="#" class="button">Boton default</a>
<a href="#" class="button round">Boton round</a>
<a href="#" class="button radius">Boton radius</a>

Resultado

Boton default Boton round Boton radius

Uso con Sass

Incluya el mixin button($bg-color,$front-color,$style) Sus parámetros (todos opcionales) son:

  • $bg-color: el color de fondo (#ddd por defecto)
  • $font-color: color del texto (#333 por defecto)
  • $style: estilo del boton (default por defecto, puede usar round o radius).
<a href="#" class="selector1">Boton 1</a>
<a href="#" class="selector2">Boton 2</a>
<a href="#" class="selector3">Boton 3</a>
.selector1 { @include button(teal, white) }
.selector2 { @include button(tomato, white, round) }
.selector3 { @include button(#2e84e6, white, radius) }

Resultado

Boton 1 Boton 2 Boton 3