Untitled

dabblet.css

a {
text-decoration:none;
padding:0px 10px;
background:#eee;
line-height:45px;
display:inline-block;
color:#555;
text-shadow:1px 1px 3px white;
}
a.radius {
border-radius:0.75em;
}
a.gradient {
background-image:linear-gradient(90deg,#333,#aaa,#333);
}
a.shadow {
box-shadow:0 0 1px black, 3px 6px 8px gray;
}
a.bg1 {
background:url(http://image.noelshack.com/fichiers/2012/26/1340969387-btn_03.png) repeat-x 0 -2px ;
}
a.ie9 {
background:#aaa;
box-shadow:
	0 0 1px black, 
	3px 6px 8px gray, 
	inset 0  30px  30px -20px  #000, 
	inset 0 -30px  30px -20px  #000
;
}
.beaf {position:relative;background-position:0 0 !important;height:56px;margin:0 20px;}
.beaf:before {
content:url(http://image.noelshack.com/fichiers/2012/26/1340969385-btn_01.png
);
position:absolute;
left:-13px; 
}
 .beaf:after {
 content:url(http://image.noelshack.com/fichiers/2012/26/1340969388-btn_05.png);
 position:absolute;
 right:-18px;
 }
 .bg-multiple {
 height:56px;
 background:
 url(http://image.noelshack.com/fichiers/2012/26/1340969385-btn_01.png) left no-repeat,
 url(http://image.noelshack.com/fichiers/2012/26/1340969388-btn_05.png) right no-repeat,
 url(http://image.noelshack.com/fichiers/2012/26/1340969387-btn_03.png) repeat-x
 }
 
 /* pour la page */
p {padding:1em 5em;}
p span {float:left; width:250px;}
p em {display:block;}
 head, style {
 display:block;
 }
 style {
 white-space:pre-wrap;
 height:200px;
 overflow:auto;
 background:#333;
 color:#f50;
 text-shadow:0 0 1px green;
 margin:1em 2em;
 padding:5px;
 border:groove;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

dabblet.html

<p><span>Shadow, radius, gradient </span>: <a href="http://www.siteduzero.com/forum-83-782462-p1-creer-un-bouton-extensible-en-css.html" class="radius shadow gradient">un bouton extensible avec radius shadow gradient</a></p>
<p><span>Shadow, radius </span>: <a href="http://www.siteduzero.com/forum-83-782462-p1-creer-un-bouton-extensible-en-css.html" class="radius shadow ie9">un bouton extensible avec radius shadow ie9</a></p>
<p><span>background, radius, shadow </span>:<a href="http://www.siteduzero.com/forum-83-782462-p1-creer-un-bouton-extensible-en-css.html" class="radius shadow bg1">un bouton extensible avec radius shadow bg1</a></p>
<p><span>background :after , :before </span>:<a href="http://www.siteduzero.com/forum-83-782462-p1-creer-un-bouton-extensible-en-css.html" class=" bg1 beaf">un bouton extensible avec  bg1 beaf</a></p>
<p><span>background multiple , <em>transparence .png inadapté</em> </span>:<a href="http://www.siteduzero.com/forum-83-782462-p1-creer-un-bouton-extensible-en-css.html" class="bg-multiple">un bouton extensible  avec bg-multiple</a></p>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}