Avisos
Vaciar todo

[Resuelto] Personalizar boton con CSS  

 
Walter
 Walter
Reputable Member

Hola, necesitaria hacer que la palabra Consultas que aparece debajo de los botones blotantes de WhatsApp y Email tenga una tipografía normal (Arial 12, negro con fondo gris), y que se mantenga centrado como esta ahora.

En lugar de Consultas voy a cambiarlo por Consultas gratis (lo aclaro porque se que influirá en el centrado de la misma)

Les dejo el código que uso actualmente:

#contact-me {
position:fixed;
right:13px;
bottom:50px;
width:50px;
height:50px;
padding:10px;
border-radius:10%;
}
#contact-me p {
position: absolute;
margin-left: -55px;
margin-top: 0px;
}
div#contact-me p {
position: absolute;
margin-left: -29px;
margin-top: 53px;
background-color: rgba(0,0,0, .6);
font-weight: bold;
color: white;
padding: 0px 4px;}

 

Gracias!

Contenido solo visible a usuarios registrados

Respondido : 15/03/2021 1:37 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

En este caso puedes probar con el siguiente código CSS

div#contact-me p {
text-align: center;
font-family: 'Arial', Helvetica, sans-serif;
color: #000;
}

Ten en cuenta que lo único que se modifica es la fuente, el tamaño y color de la tipografia

Un Saludo

Respondido : 15/03/2021 1:53 pm

Walter
 Walter
Reputable Member

@karen Gracias Karen

Me dirias por favor como hacer para que el texto aparezca asi:

Consultas Gratis (en un solo renglón) y entre ambos iconos flotantes?

Te dejo un print screen

Untitled

 en

 

Respondido : 15/03/2021 7:00 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba con el siguiente código CSS:

div#contact-me p{
  margin-top:0;
}

div#contact-me img{
  position: absolute;
  top:28px;
}

Saludos.

Respondido : 15/03/2021 8:04 pm

Cursos Gratuitos WordPress

Walter
 Walter
Reputable Member

@jmarreros Hola, no me funcionó.

Ese código lo que hizo fue llevar el texto al centro entre ambos iconos, pero se mantiene en dos lineas, lo que quiero lograr es que aparezca todo en una linea y ubicar esa linea entre ambos iconos. Seria como aparece en el print de pantalla

Respondido : 15/03/2021 8:37 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Walter,

Por favor sustituye el codigo que te envio Jhon pero sustituyelo con el siguiente:

div#contact-me p {
margin-top: 0px !important;
width: 123px !important;
right: 0px;
}

div#contact-me p{
margin-top:0;
}

Verifica esto y nos comentas

un saludo 🖐️ 

Respondido : 15/03/2021 8:49 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Walter
 Walter
Reputable Member

@argenis Funcionó perfecto! Gracias

Podria agregarlo como un borde al recuadro?

Respondido : 16/03/2021 8:03 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Walter,

 No comprendo muy bien si te refieres a esto con un borde:

div#contact-me p {
margin-top: -13px !important;
width: 133px !important;
right: 50px;
border: solid black 2px;
}

Agrega este en lugar del anterior, es decir si vez detalladamente el código agrega un border: solid black 2px;, esto es lo que se le agrego para que muestre un borde.

Un saludo 🖐️ 

Respondido : 16/03/2021 8:10 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Prueba agregar el siguiente código:

div#contact-me p{
border:2px solid gray;
}

Puedes cambiar 2px por otro valor y gray por algún otro código de color

Saludos.

Respondido : 16/03/2021 8:13 pm
Walter
 Walter
Reputable Member

Quedó perfecto, muchas gracias

Respondido : 17/03/2021 11:54 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Walter,

Gracias a ti, siempre encantados en poder ayudarte

Con esto podemos dar el tema como solucionado, escríbenos si tienes cualquier otra consulta

Un Saludo 😊 

Respondido : 17/03/2021 12:07 pm