Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Agregando botones

11/21
Recursos

Aportes 54

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Si al pasar el mouse sobre el botón Comprar tickets el texto se pone de color negro en vez de blanco solo tiene que agregar !important a la propiedad color definida en la clase btn-platzi:

.btn-platzi {
    background-color: #97c93e;
    color: white !important;
}

casi muere el segundo oso polar en este curso debido al !important

Para los que quieren personalizar aun mas sus temas de bootstrap les recomiendo bootswatch

bootstrap es perfecto para los que somos mas de backend pero necesitamos hacer algo de frontend de vez en cuando.

Uffff… Botonesss 👌🏻👌🏻

Muy importante que aún si no nos gusta el color o estilo del objeto, lo podemos personalizar

Si no quieren usar el important! (como yo), hay otras opciones de preprocesadores de CSS más amigables como Tailwind. Quizás no sea taaaaaan sencillo como Bootstrap, pero si es más personalizable para uno como desarrollador 😃

Me surge un ligero problema , al colocar mi estilo de la siguiente manera:

.btn-platzi{
  background-color: #97c93e  !important;
  color: white !important;
}

No se ve reflejado el estilo en la página hasta que coloco el !important en cada linea. ¿Esto a qué se puede deber?

Si les duelen los ojos con el !important, para corregirlo se puede usar la especificidad en CSS, siendo mas especifico al elemento. De esa manera no usan el !important ya que es considerado mala practica.


/* Button styles */
.row .btn-platzi {
  background-color: #7953B2;
  color: white ;
}

+2

esta muy facil, excelente bootstrap

Por si quieren que el texto de la cabecera tenga el efecto del hover como la del boton.
.text-platzi:hover { color: #82ad36 !important; }

Excelente clase!

los outline buttuns
son muy cools

Excelente clase… mi pantalla es algo grande, pero creo que se ve bien ❤️

No sé porque pero el botón me queda en un tono opaco.

.btn-platzi{
    background-color: #97c93e;
    color: white;
}

No me queda el tono verde brillante que debería 😕

Todo un mundo analizar los colores que den armonía a nuestros proyectos 😄

Gracias por bootstrap antepasados informaticos 😄

Nunca esperé decir esto en programación pero qué fácil!

El secreto está en la práctica. Saber cuáles y en qué momentos usar ñas herramientas que nos brinda Bootstrap.

.btn-platzi:hover{
background-color: #82ad36;
color: white;
}
Lo estoy colocando así para que no me pase el color de la letra a negro

Excelente clase, lo que sumé en mis códigos de html y css fueron comentarios explicando sobre que hace cada uno. Antes de anotar en un cuadernillo. Esto me ayudaría a encontrar lo que quiero a futuro más rápido.

Solo por si acaso: Yo esta intentando cambiar los colores de mi botón, y no sucedía nada. No sabia que el orden en que se organizan los enlace a las hojas de estilos en el <head> podía influir… Tuve que poner en enlace de mi hoja de Estilos mas abajo que el enlace a Bootstrap… y luego todo funcionó muy bien!.

Si no quieren usar el importan, solo pongan en el botón la clase btn-success y btn-platzi y en la clase btn-platzi modificas el color. El color del texto se queda en blanco siempre.

<button type="button" class="btn btn-success btn-platzi">Comprar tickets</button>

.btn-platzi{
  background-color: #97c93e;
}
.btn-platzi:hover{
  background-color: #86bb2b;
}

Bootstrap esta codeado en SASS, así que aprovecho un poco a practicar.

$verde-platzi: #97c93e;
$verde-platzi-oscuro: darken($verde-platzi, 20%);

body {
  min-width: 320px;
}

.text-platzi {
  color: $verde-platzi !important;
  &:hover {
    color: white !important;
  }
}

.btn-platzi {
  background-color: $verde-platzi;
  color: white;
  border: 1px solid $verde-platzi-oscuro !important;
  &:hover {
    background-color: $verde-platzi-oscuro;
  }
}

#header {
  img {
    width: 80px;
  }
}

#main {
  .carousel-inner {
    img {
      max-height: 70vh;
      object-fit: cover;
      filter: grayscale(70%);
    }
  }
}

#carousel {
  position: relative;
  .overlay {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    .container,
    .row {
      height: 100%;
    }
  }
}

#footer {
  background: linear-gradient(90deg, #1c3643, #273b47 25%, #1e5472);
  text-align: center;
  a {
    color: white;
    text-decoration: none;
  }
}

Grosso profe!!!

Genial, todo va bien

Estos elementos que tiene bootstrap a disposición para trabajar le da mucha importancia a esta librería.

Excelente Clase !!!

Muy buena clase.

Consulta, se puede cambiar el tamaño del botón según el tamaño del dispositivo?

Excelente!

:)

Anotaciones:
Hay 2 tipos de botones, botones con relleno y botones sin relleno (outline buttons).
Tambien podemos cambiarle el tamaño al botón y elegir si queremos que ocupe todo el ancho disponible (muy usado en dispositivos moviles).

muy buena clase

¡Vaya pero que fregón es Bootstrap! De verdad que si pensaban a futuro de como iba a ser el diseño web.

Es entretenido y facil.

Que increible que es bootstrap!!

si las letras cambian el color en el botón importante se solucionan con esto

.btn-platzi {
    background-color: #97c93e ;
    color: white;
}
.btn-platzi:hover{
    background-color: #82ad36;
    color: white;
}```

Los botones de Bootstrap son muy bonitos, comparados con el HTML normal. Ademas con un par de clases se les puede asignar colores y tamaños. Me encanta.

Para que el boton se mantenga en blanco y no vaya a negro

Excelente clase

excelente 😄

aparece y desaparece el overlay

Para solucionar el texto negro en el hover seria mejor pasarle la propiedad dentro de la clase del hover y así podríamos usar cualquier color y sin usar el “!important”

.btn-platzi:hover {
  background-color: #82ad36;
  color: white;
}

Me pasaba que se ponia color negro el texto cuando pasaba el mouse, (deberia ser blanco)
Despues me pasaba que no cambiaba el color del boton al color mas oscuro cuando pasaba el mouse.

Asi lo solucione.
Nose si este bien poner !important a varais cosas, pero es la mas rapida que vi.

.btn-platzi{
    background-color: #97c93e !important;
    color: white !important;
}
.btn-platzi:hover{
    background-color: #82ad36 !important;
}```

HTML

 <button type="button"  class="btn btn-brand" data-toggle="modal" data-target="#modalCompra">Comprar</button>

CSS

.btn-brand {
    background-color: var(--main-color-brand);
    color: var(--just-white);
}

.btn-brand:hover {
    background-color: var(--second-color-brand);
}

Seguimos avanzando!!

Gran clase

Sacha es muy claro al explicar directo sin vueltas! bravo!

f

Coloco el boton tal y cuál pero sale opaco y revise todo bien pero no se porque no cambia ni con !important