Posted By

stephcode on 10/08/11


Tagged

button expand stretch


Versions (?)

Expandable stretchy image button


 / Published in: CSS
 

Replace background colors with your images.

  1. <!DOCTYPE html>
  2. <head>
  3. <title>Stretchy button</title>
  4. <style>
  5. .btn1 {
  6. position: absolute;
  7. top: 0; left: 0;
  8. cursor: pointer;
  9. text-decoration: none;}
  10.  
  11. .btn1 p span {
  12. padding-top: 10px;
  13. height: 27px;
  14. color: #88c133;
  15. font-family: 'Arial';
  16. font-size: 0.9em;
  17. float: left;}
  18.  
  19. .btn1 p .span1 {
  20. top: 0; left: 0;
  21. background: red;
  22. width: 13px;}
  23.  
  24. .btn1 p:hover .span1 {background: blue;}
  25.  
  26. .btn1 p .span2 {
  27. top: 0; right: 0;
  28. padding-right: 25px;
  29. padding-left: 12px;
  30. background: green;}
  31.  
  32. .btn1 p:hover .span2 {color: #000; background: yellow;}
  33. </style>
  34. </head>
  35.  
  36. <body>
  37.  
  38. <a class="btn1" href="page.htm"><p>
  39. <span class="span1">&nbsp;</span>
  40. <span class="span2">Stretchy button!</span></p>
  41. </a>
  42.  
  43. </body>
  44. </html>
  45.  
  46.  
  47. //alt
  48.  
  49. .btn1 {
  50. width: auto;
  51. position: absolute;
  52. bottom: 20px; left: 20px;
  53. cursor: pointer;
  54. text-decoration: none;}
  55.  
  56. .btn1 p span {
  57. padding-top: 6px;
  58. height: 29px;
  59. width: auto;
  60. color: #fff;
  61. font-family: inherit;
  62. text-transform: uppercase;
  63. font-size: 1.5em;
  64. float: left;}
  65.  
  66. .btn1 p .span1 {
  67. position: absolute;
  68. background: url(btn1.gif) left top no-repeat;
  69. width: 20px;
  70. float: right;}
  71.  
  72. .btn1 p:hover .span1 {width: 20px; background: url(btn1.gif) -20px top no-repeat;}
  73.  
  74. .btn1 p .span2 {
  75. padding-right: 8px;
  76. padding-left: 12px;
  77. background: #ae4c25;
  78. float: left;}
  79.  
  80. .btn1 p:hover .span2 {color: #fff; background: #315766;}

Report this snippet  

You need to login to post a comment.