Usability post explica como implementar un efecto apretado a un botón en los enlaces personalizados usando solo CSS3.
Ejemplo:
B o t ó n
Para ponerlo en tu blog te diriges a tu plantilla y con Ctrl+F buscas ]]></b:skin> y justo encima colocas el CSS:
/* Botón en general */ .button-link { font-size: 18px; /* tamaño de letra */ width: 150px; /* ancho */ text-align: center; /* alineación del texto */ padding: 10px 15px; /* expansión */ background: #4479ba; /* color de fondo */ color: #fff; /* color de texto */ -webkit-border-radius: 4px; /* borde redondeado para webkit */ -moz-border-radius: 4px; /* borde redondeado para mozilla */ border-radius: 4px; /* borde redondeado */ border: solid 1px #20538d; /* borde */ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); /* texto con sombra */ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra para webkit */ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra para mozilla */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); /* caja con sombra */ -webkit-transition-duration: 0.2s; /* duración de transición para webkit */ -moz-transition-duration: 0.2s; /* duración de transición para mozilla */ transition-duration: 0.2s; /* duración de transición */ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } /* Botón hover */ .button-link:hover { background: #356094; /* Color de fondo */ border: solid 1px #2a4e77; /* Borde */ text-decoration: none; /* Decoración de texto */ } /* Botón activado */ .button-link:active { -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra para webkit */ -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra para mozilla */ box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); /* Caja con sombra */ background: #2e5481; /* Color de fondo */ border: solid 1px #203e5f; /* Borde */ }
Ahora te diriges a elementos HTML/Javascript o en una entrada y colocas el HTML:
<p class="button-link"><b>B o t ó n</b></p>
Acerca de mi
Buscar en el blog
Lista de categorias
- CSS (14)
- Entretenimiento (4)
- HTML (18)
- Iconos (13)
- Inspiración (13)
- JAVA Interfaz (6)
- jQuery (3)
- Lo que NO encontré en Internet (1)
- Programas en C (69)
- Recursos Online (13)
- Trucos (6)
- Widgets (2)
Contenido del Blog
Comentarios recientes
Sigueme en Twitter
Archivo del blog
-
▼
2012
(131)
-
▼
marzo
(22)
- Menu horizontal desplegable con CSSIII
- Lista de nueve editores de fotos en linea
- Tablas con CSS efecto IIID
- Generador de banners en linea
- Parrafos con HTML
- Patrones de texturas
- Realizar notas con las etiquetas fieldset y legend
- Fondos de pantalla, relojes, calendarios y juegos ...
- Fusion entre dibujo y la fotografia
- Tooltip brillante hecho con CSSIII
- Galerias de imagenes con efecto jQuery y CSSIII
- Banderas del mundo realizadas con HTML
- Boton vinculo con CSSIII
- Las mejores paginas web 404 no encontradas
- Textos IIID CSSIII
- Marcos generados con CSS
- Buscar imagenes de manera facil y rapida
- Gran coleccion de iconos google plus para tu blog
- Un cronometro con lenguaje C
- jShowOff: un slide de imagenes efectuado con jQuery
- Menus horizontales sencillos creados con CSS efect...
- Averiguar la edad actual que tienes con programa en C
-
▼
marzo
(22)