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;
}
.radius {
	border-radius:10px/8px;
}
.gradient {
	background-image:linear-gradient(90deg,#333,#aaa,#333);
}
.shadow {
	box-shadow:
		inset 1px 0 0 #aaa, 
		inset -1px 0 0 #333,
		0 0 1px black, /* lissage des bords */
		3px 6px 8px gray;
}
.bg1 {
	background:url(http://image.noelshack.com/fichiers/2012/26/1340969387-btn_03.png) repeat-x 0 -2px ;
}
.ie9 {
	background:#ccc;
	box-shadow:
		inset 1px 0 0 #ccc, 
		inset -1px 0 0 #333,
		0 0 1px black, /* pour le lissage des bords */
		3px 6px 8px gray, 
		inset 0  30px  20px -18px  #222, 
		inset 0 -30px  20px -18px  #222
	;
}
.beaf {
	position:relative;
	background-position:0 0 !important;
	height:56px;
	margin:0 10px;
}
.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
	 ;
 }
 p .button {
	 vertical-align:middle;
	 display:inline-block;
	 width:auto;
	 padding-left:3px;
	 float:none;
	 background:
	 url(http://image.noelshack.com/fichiers/2012/26/1340969385-btn_01.png) left top no-repeat;
 }
 .button a {
	 padding-right:18px;
	 background:url(http://image.noelshack.com/fichiers/2012/26/1340969388-btn_05.png) right top no-repeat;
 }
 .button a span {
	 background:url(http://image.noelshack.com/fichiers/2012/26/1340969387-btn_03.png) repeat-x top left;
	 height:56px;
 }
 /* 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 5px 5px 105px;
	 border:groove;
 }
 style:before {
	 content:'STYLES';
	 height:210px;
	 position:absolute;
	 left:2em;
	 top:1em;
	 margin:3px;
	 line-height:200px;
	 background:#6E90C0;
	 padding:0 1em;
	 border-right:ridge #f50;
	 font-weight:bold;
	 color:white;
	 text-shadow:1px 1px 2px black;
 }

dabblet.html

<!-- si votre navigateur le permet, la balise style et son contenu devrait s'afficher devant ces paragraphes de test -->
<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(.ie9), radius </span> : <a href="http://www.siteduzero.com/forum-83-782462-p1-creer-un-bouton-extensible-en-css.html" class="radius ie9">un bouton extensible avec radius 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>
<p><span> span en plus </span> : <span class="button"><a href="http://www.siteduzero.com/forum-83-782462-p1-creer-un-bouton-extensible-en-css.html"><span class="bg1">un bouton extensible  de spans en plus</span></a></span></p>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}