¿Usas un corte para mostrar tus entradas truncadas en la página de Inicio? ¿Quieres decorar ese texto con algo más de estilo?Pues hala... Aquí tienes unos cuantos estilos que puedes añadir a tu CSS para luego modificar a tu antojo colores y formas. Puedes usarlos para cualquier tipo de enlace de texto y de esta forma convertirlo en un boton.Algunos son un poco raros pero dicen que para gustos las webs. Bueno son los colores, pero seguro que la expresión también cuadra en este caso.Para no buscar códigos hexadecimales usé losnombres html de los colores.
Con fondo distinto y cambio de color de fuente con hover.jump-link a {text-align: center;text-decoration: none;padding: 3px;color: white;background: burlywood;}.jump-link a:hover {color: black;}
Esquinas redondeadas y cambio de fondo, color fuente y estilo con hover.jump-link a {text-align: center;text-decoration: none;padding: 5px;color: olive;background: khaki;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.jump-link a:hover {font-style: italic;color: darkgreen;background: yellowgreen;}
Esquinas redondeadas, borde y cambio de color y fuente con hover.jump-link a {text-align: center;text-decoration: none;padding: 3px;color: white;background: blue;border: 2px solid darkblue;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.jump-link a:hover {color: blue;background: lightcyan;border-color: blue;}
Caja redondeada con borde que ocupa todo el ancho y con cambio de color de fondoLeer más.jump-link a {display:block;text-align: right;text-decoration: none;padding: 3px;color: white;background: darkgoldenrod;border: 2px solid maroon;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.jump-link a:hover {background: goldenrod;}
Caja con borde y cambio de color de fondo, fuente y ancho mediante transiciónLeer más.jump-link a {display:block;width:90px;text-align: right;text-decoration: none;padding: 3px;color: whitesmoke;background: black;border: 2px solid darkblue;-moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}.jump-link a:hover {width:300px;color: black;background: whitesmoke;-moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}
Caja con cambio de color de fondo que se oscurece y llega a ocupar casi todo el ancho mediante transiciónLeer más.jump-link a {display:block;width: 10%;min-width:80px;text-align: right;text-decoration: none;padding: 3px;color: black;background: yellow;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;}.jump-link a:hover {width: 94%;background: gold;-moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}
Caja con forma de flecha con cambio de color al hacer hover.jump-link a {position:relative;height: 24px;line-height: 24px;text-align: left;text-decoration: none;padding: 4px;color: white;background: DarkSlateBlue;}.jump-link a:hover {background: slateblue;}.jump-link a:after {border-color: transparent transparent transparent DarkSlateBlue ;border-style: solid;border-width: 13px 13px 13px 13px;content: "";float: right;right:-26px;height: 0;position: absolute;top: 0;width: 0;}.jump-link a:hover:after {border-color: transparent transparent transparent slateblue;}
Con forma de etiqueta y cambio suave de color con el hover.jump-link a {position:relative;height: 24px;line-height: 24px;text-align: left;text-decoration: none;padding: 4px 6px 4px 14px;color: darkgoldenrod;background: palegoldenrod;}.jump-link a:hover {background: khaki;}.jump-link a:after {background-color: white;content: "";float: right;left: 0;position: absolute;top: 10px;height: 6px;width: 6px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}.jump-link a:before {border-color: transparent palegoldenrod transparent transparent ;border-style: solid;border-width: 13px 13px 13px 13px;content: "";float: left;left:-26px;height: 0;position: absolute;top: 0;width: 0;}.jump-link a:hover:before {border-color: transparent khaki transparent transparent;}
Botón circular que gira al hacer hover.jump-link a {display:block;color:#fff;font-size:15px;line-height:80px;text-align:center;text-decoration:none;width:80px;height:80px;background: orange;padding:0;margin:0;border: 2px solid orange;-webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px;}.jump-link a:hover {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);-moz-transition: all 1s; -webkit-transition: all 1s; transition: all 1s;}
Botón con gradientes y relieve suave.jump-link a {-webkit-box-shadow: 0 1px 1px #555;-moz-box-shadow: 0 1px 1px #555;box-shadow: 0 1px 1px #555;border-top:1px solid #ef9900;-moz-border-radius:2px;-web-kitborder-radius:2px;border-radius:2px;background: #f9a817; background: -moz-linear-gradient(center top , #ffbb41, #f9a817) repeat scroll 0 0 transparent;background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,#ffbb41), color-stop(100%,#f9a817)) repeat scroll 0 0 transparent;color: #000;display: block;font-weight: bold;padding: 8px 10px 9px;position: relative;text-decoration: none;font-size:15px;text-shadow:1px 0 1px #FF0;width:110px;text-align:center;}.jump-link a:hover {background: #ffbd46;background: -moz-linear-gradient(center top , #ffbd46, #ffb229) repeat scroll 0 0 transparent;background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,#ffbd46), color-stop(100%,#ffb229)) repeat scroll 0 0 transparent;color: #555;}
Botón realista con efecto pulsación.jump-link a {text-decoration: none;font-weight: bold;text-shadow: rgba(255, 255, 255, .5) 0 1px 0;padding: 4px;margin: 4px;position: relative;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;border-top: 1px solid rgba(255, 255, 255, 0.8);border-bottom: 1px solid rgba(0, 0, 0, 0.1);background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255, 255, 255, 0) ), to( rgba(255, 255, 255, 0.7) )), url(noise.png);background-image: -moz-radial-gradient(top, ellipse cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255, 255, 255, 0) ), to( rgba(255, 255, 255, 0.7) ));-webkit-transition: background .2s ease-in-out;-moz-transition: background .2s ease-in-out;transition: background .2s ease-in-out;color: #666 !important;background-color: #BFBFBF;-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* sombra inner */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color borde */ rgba(0,0,0,0.2) 0 .5em 5px;}.jump-link a:hover {background-color: hsl(0, 0%, 83%);}.jump-link a:active {background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) ));-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */rgba(0,0,0,0.4) 0 .1em 1px, /* borde */rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */-moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */rgba(0,0,0,0.4) 0 .1em 1px, /* borde */rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* sombra inner */rgba(0,0,0,0.4) 0 .1em 1px, /* borde */rgba(0,0,0,0.2) 0 .2em 6px; /* sombra */}
