Category Archives: CSS

Hojas de estilo

Hacer un botón a partir de un link con css

Les comparto esta truco css que la verdad le da mucha vista a nuestros links html:

1. envolvemos nuestro el contenido del tag con etiquetas y asiganamos las respectivas clases css, quedando de la siguiente forma:

 HTML | 
 
 copy code |
?

  1. <a href="#" class="button">
  2.     <span class="vermas">Texto de mi boton</span>    
  3. </a>

 2. creamos nuestras clases de css para que el lin obtenga un aspecto de boton.

3. el “PLUS” es que el boton contiene un icono que le dara mucha vista:

 CSS | 
 
 copy code |
?

  1. a.button{
  2. background-position: center top;
  3. background: url('images/bk_mas_a.png');
  4. display: block;
  5. color: #333333;
  6. font-weight: bold;
  7. height: 27px;
  8. line-height: 28px;
  9. text-decoration: none;
  10. width: 296px;
  11. font-size: 10px;
  12. font-family: arial;
  13. background-repeat: no-repeat;
  14. margin-left: 3px;
  15. margin-top: -1px;
  16. text-align: center;
  17. }
  18. a:hover.button{
  19. background-position: center top;
  20. text-decoration: none;
  21. background-image: url('images/bk_mas_hover.png');
  22. background-repeat: no-repeat;
  23. color: #333333;
  24. }
  25. .vermas{
  26. background-position: 80px 7px;
  27. text-indent: 10px;
  28. display: block;
  29. background-image: url('images/link.png');
  30. background-repeat: no-repeat;
  31. }

Espero que les agrade el truco. Salu2