2

Necesito ayuda en lo que dice, estoy diseñando estos botones, pero no se ven con un orden, les adjunto la imagen.

introducir la descripción de la imagen aquí

Bueno lo que deseo es algo asi (como ven en la imagen todo esta ordenado)

Texto a la derecha e iconos a la izqueirda:

introducir la descripción de la imagen aquí

y bueno esto es mi css.

page-home {
    p {
        text-align: center;
        color: black;
    }
    .body {
        background-color: #FFEB3B;
    }
    .botones {
        border: none;
        color: white;
        text-align: left;
        text-decoration: none;
        display: inline-block;
        font-size: 17px;
        margin: 4px 2px;
        cursor: pointer;
    }
}

Bueno el HTML es en ionic:

<ion-content padding class="body" align="center">
    <img src="../../assets/logo.png" class="imagen">
    <br>
    <br>
    <button ion-button item-end round full icon-start class="botones">
        <ion-icon name='logo-facebook'></ion-icon>
        Registrate via Facebook
      </button>
    <button ion-button item-end round full icon-start color="secondary" class="botones">
        <ion-icon name='person-add'></ion-icon>
        Servicio Particular
      </button>
    <button ion-button item-end round full icon-start color="dark" class="botones">
        <ion-icon name='briefcase'></ion-icon>
        Servicio Corporativo
      </button>
    <br>
    <p>¿Eres nuevo? <a href="http://ionicframework.com/docs/v2">REGISTRATE AHORA</a></p>
</ion-content>
8
  • Por favor agrega el html para tener una mejor idea de lo que intentas hacer.
    – Shaz
    Commented el 8 ago. 2017 a las 13:59
  • Es en hmtl en ionic, igual ya lo agrege Commented el 8 ago. 2017 a las 14:00
  • yo lo veo ordenado, cuando dices ordenado exactamente dondo quieres ubicar que cosa o simplemente quieres copiar el diseño...
    – user46896
    Commented el 8 ago. 2017 a las 17:09
  • primero que nada los iconos esta ala izquierda y sin margen y me parece que el texto esta tambien alineado a la izquierda pero conun margen de X %
    – user46896
    Commented el 8 ago. 2017 a las 17:10
  • @FranciscoNúñez gracias por comentar, bueno texto a la derecha e iconos a la izquierda como esta en la iamgen inferior Commented el 8 ago. 2017 a las 17:10

4 respuestas 4

1

creo que para el icono tendrías que agregar las clases, algo como:

icon-left
icon-right
pull-right
pull-left

pero para el texto del botón tendría que ser algo custom:

html:

<button ion-button item-end round full icon-start class="botones text-custom-botones">

css:

.text-custom-botones{
  padding-left: 30px !important;
  #padding-right: 30px !important;
}

y creo que puedes meter 30% para que se adapte al diseño automáticamente.

1

Te voy a dejar un posible ejemplo que se podría personalizar fácilmente, utilizo la librería fontawesome y el selector :before.

Ejemplo FontAwesome:

/* Posición boton */

button.fb,
button.part,
button.corp {
  display: block;
  position: relative;
  height: 50px;
  line-height: 50px;
  width: 300px;
  padding-left: 100px;
  text-align: left;
  transition: all .5s;
}


/* Posicionamos el icono fijo (selector :before). */

button.fb:before,
button.part:before,
button.corp:before {
  display: block;
  position: absolute;
  left: 1rem; 
  height: 50px;
  line-height: 50px; 
}


/* Añadimos iconones mediante css y fontawsome */

button.fb:before {
  content: "\f230";
  font-family: 'FontAwesome';
}

button.part:before {
  content: "\f234";
  font-family: 'FontAwesome';
}

button.corp:before {
  content: "\f0b1";
  font-family: 'FontAwesome';
}


/* Personalizamos colores botones */

button.fb {
  background-color: DodgerBlue;
}

button.part {
  background-color: Gold;
}

button.corp {
  background-color: Gainsboro;
}


/* Efecto hover */

button.fb:hover {
  background-color: LightBlue;
}

button.part:hover {
  background-color: Khaki;
}

button.corp:hover {
  background-color: DarkGray;
}
<head>
  <!-- FontAwsome Bootstrap -->
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body>
  <button class="fb">Registrate via Facebook</button>
  <button class="part">Servicio Particular</button>
  <button class="corp">Servicio Corporativo</button>
</body>

Ahora si deseas utilizar la liberia IONIC, hay que modificar pequeños valores.

Un motivo porque personalmente me gusta más FontAwesome, cuando abres desde su web un icono, te muestra el Unicode de ese icono, por ejemplo, Unicode: f2c4, no lo he visto en IONIC, personalmente no lo he utilizado, pero lo he tenido que buscar en el CSS.

Ejemplo IONIC:

/* Posición boton */

button.fb,
button.part,
button.corp {
  display: block;
  position: relative;
  height: 50px;
  line-height: 50px;
  width: 300px;
  padding-left: 100px;
  text-align: left;
  transition: all .5s;
}


/* Posicionamos el icono fijo (selector :before). */

button.fb:before,
button.part:before,
button.corp:before {
  display: block;
  position: absolute;
  left: 1rem;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
}


/* Añadimos iconones mediante css y fontawsome */

button.fb:before {
  content: "\f231";
  font-family: "Ionicons";
}

button.part:before {
  content: "\f480";
  font-family: "Ionicons";
}

button.corp:before {
  content: "\f110";
  font-family: "Ionicons";
}


/* Personalizamos colores botones */

button.fb {
  background-color: DodgerBlue;
}

button.part {
  background-color: Gold;
}

button.corp {
  background-color: Gainsboro;
}


/* Efecto hover */

button.fb:hover {
  background-color: LightBlue;
}

button.part:hover {
  background-color: Khaki;
}

button.corp:hover {
  background-color: DarkGray;
<head>
  <!-- IONIC LINK HTTPS CORREGIDO -->
  <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
</head>

<body>
  <button class="fb">Registrate via Facebook</button>
  <button class="part">Servicio Particular</button>
  <button class="corp">Servicio Corporativo</button>
</body>

11
  • Faltaria alinear el texto, debe estar a la izquierda del icono pero alineados a la derecha ...
    – user46896
    Commented el 9 ago. 2017 a las 14:53
  • @FranciscoNúñez he actualizado el código, simplemente al botón principal le he añadido un text-align: right; y padding-right: 1rem;, espero que es así como te gusta, saludos.
    – D.Bulten
    Commented el 9 ago. 2017 a las 16:04
  • algo es algo pero la idea era otra si vez el original tanto los iconos como el texto estan alineados a la izquierda, pero el texto tiene un pading como de 40 px para separarlo del icono
    – user46896
    Commented el 9 ago. 2017 a las 16:08
  • @FranciscoNúñez ahora te entendí, mira mi ejemplo ahora, a ver si la tercera es la vencida.
    – D.Bulten
    Commented el 9 ago. 2017 a las 16:16
  • 1
    si ahora si eso es lo que quiere el men de la pregunta saludos, aunque el lo queria usando el recurso de IONIC, no Fontawesone.
    – user46896
    Commented el 9 ago. 2017 a las 16:17
0
  <ion-icon name="add-circle-outline" slot="end" >
  </ion-icon>
2
  • 2
    Hola Ricardo, aunque el código compartido puede servir para solucionar el problema expuesto en la pregunta, esta respuesta ha sido marcada como de baja calidad por la comunidad debido a su extensión y contenido. Las publicaciones que son sólo código se consideran de baja calidad y no suelen ser de ayuda a otros usuarios. Por favor, edita tu respuesta para añadir algo más de detalle: ¿qué hace ese código? ¿cómo soluciona el problema? ¿dónde iría dentro del código de la pregunta? Lee Cómo responder y visita el recorrido de bienvenida para más información.
    – Alvaro Montoro
    Commented el 14 abr. 2020 a las 21:32
  • Hola por favor modifica esta publicación en base a lo que comenta Alvaro, saludos!
    – Jorgesys
    Commented el 17 abr. 2020 a las 15:16
0

Por aquí dejo mi aportación:

Dentro de la etiqueta button coloca un span que será el icono en cuestión y a este span añádele un float right.

Al texto de la etiqueta button añádele un text-align left.

Fijate en el ejemplo práctico de abajo.....

(En los ejemplos se está utilizando fontawesome).

.my-button {
   width: 200px;
   padding: 5px;
   margin: 0 0 10px 0;
   text-align: left;
   display: block;
}


.icon-pull-right {
    float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>Iconos a la derecha</title>

  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  
</head>

<body>
  
      <h3>Ejemplo 1</h3>

      <button class="my-button" type="button">Item01 <span class="icon-pull-right fas fa-caret-right"></span></button>

      <button class="my-button" type="button">Item02 <span class="icon-pull-right fas fa-caret-right"></span></button>

      <button class="my-button" type="button">Item03 <span class="icon-pull-right fas fa-caret-right"></span></button>

      <h3>Ejemplo 2</h3>

      <button class="my-button" type="button">Item01 <span class="icon-pull-right fab fa-facebook-square"></span></button>

      <button class="my-button" type="button">Item02 <span class="icon-pull-right fab fa-twitter-square"></span></button>

      <button class="my-button" type="button">Item03 <span class="icon-pull-right fab fa-linkedin"></span></button>
      
</body>
</html> 

3
  • Saludos @FernandoBonilla, tu respuesta quedaría mucho más completa si agregas una explicación sobre como funciona y como resuelve el problema de OP, recuerda que hay usuarios que apenas van comenzando y no comprenderás el código. ;)
    – Israel-ICM
    Commented el 14 dic. 2021 a las 16:01
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 14 dic. 2021 a las 22:09
  • A ver ahora qué tal.... Commented el 15 dic. 2021 a las 19:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.