CSS - Crear boton con icono, NO imagen de fondo

 
Vista:
sin imagen de perfil
Val: 12
Ha aumentado su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

Crear boton con icono, NO imagen de fondo

Publicado por giuli (8 intervenciones) el 25/04/2018 12:17:32
En internet encuentro tutoriales para crear botones con imagen de fondo.
Pero lo que realmente quiero es un boton como las app de escritorio, que dice clientes abajo o al costado por ejemplo, y la imagen de una persona un icono digamos una cabecita ja..
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 5
Ha disminuido su posición en 14 puestos en CSS (en relación al último mes)
Gráfica de CSS

Crear boton con icono, NO imagen de fondo

Publicado por Juan (2 intervenciones) el 25/04/2018 12:39:02
Buenas giuli

Eso es tan fácil como crear tu <button><span class=""></span> TU MENSAJE</button>.

Normalmente yo para la clase del SPAN uso glyphicon, tiene bastantes iconos para que puedas elegir, busca en SAN GOOGLE y no tiene pérdida.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 12
Ha aumentado su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

Crear boton con icono, NO imagen de fondo

Publicado por giuli (8 intervenciones) el 25/04/2018 18:39:18
gracias amigo!!

Entonces descargo bootstrap y lo incluyo en el html? y luego puedo crear buttons
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear boton con icono, NO imagen de fondo

Publicado por Roy (1 intervención) el 26/04/2018 12:31:13
Buenas giuli

Los botones los puedes crear sin ningún framework de estilos (como bootstrap), pero si lo incluyes viendo la documentación, pues siempre te quedarán algo más decentes visualmente.

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Crear boton con icono, NO imagen de fondo

Publicado por juan jose (57 intervenciones) el 26/04/2018 16:36:21
con css puedes hacer casi cualquier cosa, no entiendo por que complicarse la vida
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ricardo
Val: 11
Ha aumentado su posición en 11 puestos en CSS (en relación al último mes)
Gráfica de CSS

Crear boton con icono, NO imagen de fondo

Publicado por Ricardo (7 intervenciones) el 26/04/2018 22:47:13
podrías hacerlo con html incluso
1
<input type="button" value="Lo que quieras">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 12
Ha aumentado su posición en 6 puestos en CSS (en relación al último mes)
Gráfica de CSS

Crear boton con icono, NO imagen de fondo

Publicado por giuli (8 intervenciones) el 27/04/2018 13:47:21
Lo que pasa es que busco glypicon en google y salta bootstrap, pero como lo haria sin bootstrap, suponiendo tengo el icono en bmp que iria en el boton?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ricardo
Val: 11
Ha aumentado su posición en 11 puestos en CSS (en relación al último mes)
Gráfica de CSS

Crear boton con icono, NO imagen de fondo

Publicado por Ricardo (7 intervenciones) el 28/04/2018 01:08:08
Si se puede
1
2
3
.botonimagen{
  background-image:url(imagen.jpg);
}

1
<input type="button" class="botonimagen" value="Texto del boton"/>


y si tienes inconvenientes con el tamaño
esta background-size , background-repeat y background-position
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear boton con icono, NO imagen de fondo

Publicado por Ronny Camacho (1 intervención) el 29/11/2018 01:28:04
Saludos, sencillamente es muy facil, no se porque las personas se complican con CSS puro es mejor de lo que parece, si lo que estas diseñando es una website, claro esta todo el tiempo estaras online, puedes referenciar a una pagina de fuentes e iconos, en mi caso uso awesome:

1
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossorigin="anonymous"></script>

claro esta el link que colocaras en el head para vincular la galeria de imagenes de awesome, luego simplemente en su lista de iconos buscas las que deseas agregar ejemplo una de DELETE o BORRA, para botones del CRUD,
creas tu boton:
1
<button>DELETE <i class="far fa-trash-alt"></i></button>
y dentro de ella misma insertas el titulo del botón y la instancia al icono que te da awesome, en este caso me dio <i class="far fa-trash-alt"> y listo tienes tus botones con iconos, también puedes descargarlos e ir haciendo tu galería personalizada, y llamarlos con background-image:url(directorio del icono y su nombre), donde por razones de rendimiento te sugiero el formato SVG aunque el .ICO estaría bien dependiendo la cantidad que requieras.

En lo personal las fuentes e iconos las llamo desde sus paginas con el link que vincula, pues he de entender que toda website siempre esta online, pero hay PWA, que trabajan offline, y tener todo en tu carpeta es lo ideal, saludos desde Venezuela
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Crear boton con icono, NO imagen de fondo

Publicado por Senia (1 intervención) el 19/09/2022 15:14:24
hola y si quisiera agregar un transh en la parte superior derecha para que borre la imagen como lo crearia de esa misma manera en que lo hiciste o como?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar