Advanced Search

Return to Snippet

Revision: 51952
at April 20, 2012 08:04 by stephcode
Updated Code 
<!DOCTYPE html>
<head>
<title>Stretchy button</title>
<style>
.btn1 {
	position: absolute;
	top: 0; left: 0;
	cursor: pointer;
	text-decoration: none;}

.btn1 p span {
	padding-top: 10px;
	height: 27px;
	color: #88c133;
	font-family: 'Arial';
	font-size: 0.9em;
	float: left;}
	
.btn1 p .span1 {
	top: 0; left: 0;
	background: red;
	width: 13px;}
	
.btn1 p:hover .span1 {background: blue;}

.btn1 p .span2 {
	top: 0; right: 0;
	padding-right: 25px;
	padding-left: 12px;
	background: green;}

.btn1 p:hover .span2 {color: #000; background: yellow;}
</style>
</head>

<body>

<a class="btn1" href="page.htm"><p>
    <span class="span1">&nbsp;</span>
    <span class="span2">Stretchy button!</span></p>
</a>

</body>
</html>


//alt

.btn1 {
	width: auto;
	position: absolute;
	bottom: 20px; left: 20px;
	cursor: pointer;
	text-decoration: none;}
 
.btn1 p span {
	padding-top: 6px;
	height: 29px;
	width: auto;
	color: #fff;
	font-family: inherit;
	text-transform: uppercase;
	font-size: 1.5em;
	float: left;}
 
.btn1 p .span1 {
	position: absolute;
	background: url(btn1.gif) left top no-repeat;
	width: 20px;
	float: right;}
 
.btn1 p:hover .span1 {width: 20px; background: url(btn1.gif) -20px top no-repeat;}
 
.btn1 p .span2 {
	padding-right: 8px;
	padding-left: 12px;
	background: #ae4c25;
	float: left;}

.btn1 p:hover .span2 {color: #fff; background: #315766;}

Revision: 51951
at October 8, 2011 05:56 by stephcode
Initial Code 
<!DOCTYPE html>
<head>
<title>Stretchy button</title>
<style>
.btn1 {
	position: absolute;
	top: 0; left: 0;
	cursor: pointer;
	text-decoration: none;}

.btn1 p span {
	padding-top: 10px;
	height: 27px;
	color: #88c133;
	font-family: 'Arial';
	font-size: 0.9em;
	float: left;}
	
.btn1 p .span1 {
	top: 0; left: 0;
	background: red;
	width: 13px;}
	
.btn1 p:hover .span1 {background: blue;}

.btn1 p .span2 {
	top: 0; right: 0;
	padding-right: 25px;
	padding-left: 12px;
	background: green;}

.btn1 p:hover .span2 {color: #000; background: yellow;}
</style>
</head>

<body>

<a class="btn1" href="page.htm"><p>
    <span class="span1">&nbsp;</span>
    <span class="span2">Stretchy button!</span></p>
</a>

</body>
</html>
Initial URL 









Initial Description





Replace background colors with your images.









Initial Title





Expandable stretchy image button









Initial Tags





button









Initial Language





CSS