No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Agregando botones

11/21
Recursos

Aportes 56

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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;
}

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

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

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

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 ;
}

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 馃槂

Uffff鈥 Botonesss 馃憣馃徎馃憣馃徎

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?

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

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鈥 mi pantalla es algo grande, pero creo que se ve bien 鉂わ笍

+2

Si nos les resulta aplicar el estilo el bot贸n de comprar tickets鈥
Yo cambi茅 el <button> por otro directamente tra铆do desde bootstrap (el btn-success) y en los estilos, le puse un ID en vez de clase y as铆 se aplic贸 bien el estilo.

<button id=鈥渂tn-platzi鈥 type=鈥渂utton鈥 class=鈥渂tn鈥>Comprar tickets</button>

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

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

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!.

esta muy facil, excelente bootstrap

Excelente clase!

los outline buttuns
son muy cools

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.

Veo a mucha gente en los comentarios discutiendo si poner o no el !important, colocarle otra clase o un id. Yo lo que hice fue editar la misma clase de btn-success, asi: .btn-success { background-color: #97c93e; } . btn-success:hover { background-color: #89ad36; }

.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.

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