TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar botones de presión CSS 3D en Weebly?

2

En nuestro artículo anterior, vimos cómo agregar y personalizar el elemento del botón Weebly predeterminado. Aunque es posible modificar los botones, editar el estilo de los botones existentes es una tarea complicada y, a menudo, no funcionará como esperaba. La solución simple es incrustar su propio CSS / HTML personalizado utilizando el elemento de código de incrustación de Weebly. No obtendrá las opciones de personalización al incrustar, sin embargo, puede crear fácilmente botones atractivos con efectos CSS. Aquí explicamos cómo agregar botones de presión de CSS 3D en el sitio de Weebly.

Botones de prensa CSS 3D

A continuación se muestra cómo se verán los botones de presión 3D.

¿Cómo agregar botones de presión CSS 3D en Weebly?

Los botones tienen las siguientes características:

  • No se requieren imágenes, lo que mejora la velocidad de carga del sitio y sus esfuerzos dedicados a la creación de imágenes.
  • Los colores y estilos se pueden personalizar fácilmente para adaptarse a cualquier tipo de tema y diseño.
  • Puede controlar el número de botones en HTML mediante el elemento de código incrustado. Esto significa que puede colocar un número diferente de botones en diferentes páginas manteniendo el CSS de origen igual.
  • Cada botón se puede vincular a una o todas las páginas de su sitio.

¿Cómo agregar botones de presión CSS 3D en Weebly?

Explicaremos aquí cómo agregar 5 botones con el estilo 3D anterior. Puede eliminar o agregar el CSS y el HTML correspondiente para agregar o eliminar botones y cambiar el color y los estilos.

Paso # 1 – Agregar CSS del botón

El primer paso es decidir si desea agregar los botones solo en algunas páginas o en muchas páginas de su sitio. Si desea agregar algunas páginas, agregue el código CSS solo a esas páginas en "Páginas> Seleccione una página> Configuración de SEO> Código de encabezado" como se muestra a continuación:

¿Cómo agregar botones de presión CSS 3D en Weebly?

Agregar código de encabezado en la página

Si desea agregar los botones en varias páginas, se recomienda agregar los estilos CSS en una hoja de estilo externa y un enlace a la página. Weebly de forma predeterminada solo tiene una hoja de estilo externa por sitio. Vaya a la sección "Tema> Editar HTML / CSS> Estilos> main.less". Busque el archivo y agregue el código en la parte inferior de otros códigos existentes. Guarde sus cambios y salga del editor de código.

¿Cómo agregar botones de presión CSS 3D en Weebly?

Edición del archivo CSS principal en Weebly

Al usar el editor de código, debe guardar el tema con un nombre personalizado. Si no desea editar el tema, vaya a la sección "Configuración> SEO> Código de encabezado". Aquí, puede agregar el código CSS que se aplicará a todas las páginas de su sitio (similar a editar el archivo main.less).

¿Cómo agregar botones de presión CSS 3D en Weebly?

Agregar código de encabezado a nivel de sitio Weebly

Aquí está el código CSS para botones 3D:

<style type="text/CSS"> a.css3dbutton { background: #c1e75c; color: black; text-decoration: none; font: bold 18px Arial; position: relative; display: inline-block; margin-right: 15px; padding: 15px; border-radius: 85px; width: 85px; height: 85px; outline: none; box-shadow: 0 8px 0 #8dab3b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.css3dbutton span.outer{ text-align: center; width: 100%; display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } a.css3dbutton span.outer span.top{ display: block; padding-bottom: 4px; } a.css3dbutton span.outer span.bottom{ border-top: 1px solid black; padding-top: 4px; display: block; text-transform: uppercase; line-height: 12px; font-size: 60%; } a.css3dbutton:hover { background: #9cc62b; box-shadow: none; -ms-transform: translateY(8px); -webkit-transform: translate3D(0, 8px, 0); -moz-transform: translateY(8px); transform: translate3D(0, 8px, 0); } a.css3dbutton.blue{ background: #a6e9f7; box-shadow: 0 8px 0 #529dad, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.blue:hover { background: #66cbe1; box-shadow: none; } a.css3dbutton.pink{ background: #fbbaba; box-shadow: 0 8px 0 #d74848, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.pink:hover { background: #ea6161; box-shadow: none; } a.css3dbutton.yellow{ background: #f3fa86; box-shadow: 0 8px 0 #dbcd2f, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.yellow:hover { background: #ecd347; box-shadow: none; } a.css3dbutton.brown{ background: #e0c87e; box-shadow: 0 8px 0 #b3805b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.brown:hover { background: #b3805b; box-shadow: none; } </style>

Obtenga más información sobre cómo editar CSS / HTML de origen en Weebly.

Paso # 2 – Agregar código HTML

Arrastre y suelte un elemento de código incrustado en una página donde desee agregar los botones y pegue el siguiente código en su interior. No olvide reemplazar # con sus propios enlaces.

<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>

Paso n. ° 3: personalización de los botones

Hay infinitas posibilidades para personalizar los botones según sus necesidades. Aquí hay algunos escenarios generales que podría estar buscando.

Agregar o quitar botones

Suponga que solo necesita 3 botones en lugar de 5 como se muestra en el ejemplo. En este caso, puede eliminar el código de los botones 4º y 5º tanto de CSS como de HTML. Pero recomendamos agregar el número máximo de estilos en CSS y luego controlar el número de botones en HTML. En este escenario, donde solo necesita 3 botones, deje el código CSS tal como está, que tiene 5 estilos diferentes definidos y agregue código HTML solo para 3 botones.

De esta manera, puede agregar 3 botones en una página, 5 botones en otra página y así sucesivamente.

Personalizar los colores y el tamaño

  • Puede cambiar el color del texto y el color de los atributos del botón, como el fondo y la sombra.
  • Cambie los atributos de ancho y alto para cambiar el botón redondo a tamaño ovalado o cualquier otra proporción.

Recuerde, puede usar el elemento espaciador para agregar suficiente espacio por encima y por debajo de los botones. Del mismo modo, puede colocar el botón en el lado derecho o izquierdo de cualquier otro elemento usando el espaciador.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More