Advanced Search

Expandable stretchy image button

/ Published in: CSS
Save to your folder(s)
Replace background colors with your images.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.