CSS-Tricks Example

View the CSS

Button Maker

.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

close
<!DOCTYPE html>
<html>
<head>
       
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       
       
<title>Button Maker</title>
       
       
<link rel="stylesheet" type="text/css" href="css/style.css">
       
<link rel="stylesheet" type="text/css" href="css/colorpicker.css">
        <link rel="stylesheet" type="text/css" href="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">

    <script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
    <script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
   
<script type="text/javascript" src="js/colorpicker.js"></script>
   
<script type="text/javascript" src="js/buttonmaker.js"></script>
</head>

<body>
       
           
<div id="demo-top-bar"><div id="demo-bar-inside"><h2 id="demo-bar-badge">CSS-Tricks Example</h2><div id="demo-bar-buttons"><a class="header-button" href="/css3-button-maker/">← Back to Article</a>   <a class="header-button" href="/examples/">More Demos →</a></div><div id="demo-bar-ad"><div id="bsap_1255488" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div></div></div>

   
<div id="page-wrap">
 
       
<div id="button-box">
   
               
<a href="#" class="button">View the CSS</a>
                       
       
</div>
       
       
<div id="controls">
       
           
<h1>Button Maker</h1>

           
<div class="sliderBar" id="sizer"></div>
           
<div class="sliderBar" id="font-sizer"></div>
           
<div class="sliderBar" id="border-rounder"></div>
           
           
<div id="colors">
           
               
<div>
                   
<label for="topGradientValue">Top Gradient Color</label>
                   
<input type="text" maxlength="6" size="6" id="topGradientValue" class="pickable" rel="backgroundTop" value="3e779d" style="background: #3e779d;">
               
</div>
               
               
<div>
                   
<label for="bottomGradientValue">Bottom Gradient Color</label>
                   
<input type="text" maxlength="6" size="6" id="bottomGradientValue" class="pickable" rel="backgroundBottom" value="65a9d7" style="background: #65a9d7;">
               
</div>
               
               
<div>
                   
<label for="borderTopColorValue">Top Border Color</label>
                   
<input type="text" maxlength="6" size="6" id="borderTopColorValue" class="pickable" rel="borderTopColor" value="96d1f8" style="background: #96d1f8;">
               
</div>
               
               
<div>
                   
<label for="hoverBackgroundColorValue">Hover Background Color</label>
                   
<input type="text" maxlength="6" size="6" id="hoverBackgroundColorValue" class="pickable" rel="hoverBackground" value="28597a" style="background: #28597a;">
               
</div>
               
               
<div>
                   
<label for="textColor">Text Color</label>
                   
<input type="text" maxlength="6" size="6" id="textColor" class="pickable" rel="textColor" value="white" style="background: white;">
               
</div>
               
               
<div>
                   
<label for="hoverTextColorValue">Hover Text Color</label>
                   
<input type="text" maxlength="6" size="6" id="hoverTextColorValue" class="pickable" rel="hoverColor" value="cccccc" style="background: #cccccc;">
               
</div>
               
               
<div>
                   
<label for="activeBackgroundColor">Active Background Color</label>
                   
<input type="text" maxlength="6" size="6" id="activeBackgroundColor" class="pickable" rel="activeBackground" value="1b435e" style="background: #1b435e;">
               
</div>
           
           
</div>
           
           
<select id="fontSelector">
               
<option value="Helvetica, Arial, Sans-Serif">Helvetica</option>
               
<option selected="seleted" value="Georgia, Serif">Georgia</option>
               
<option value="'Lucida Grande', Helvetica, Arial, Sans-Serif">Lucida Grande</option>
           
</select>
               
       
</div>
       
       
</div>
       
   
<div id="the-css"></div>
       
       
</body>

</html>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       
       
       
<title>Button Maker</title>
       
       
<link rel="stylesheet" type="text/css" href="./Button Maker_files/style.css">
       
<link rel="stylesheet" type="text/css" href="./Button Maker_files/colorpicker.css">
       
<link rel="stylesheet" type="text/css" href="./Button Maker_files/jquery-ui.css">

   
<script type="text/javascript" src="./Button Maker_files/jquery.min.js"></script>    
   
<script type="text/javascript" src="./Button Maker_files/jquery-ui.min.js"></script>
   
<script type="text/javascript" src="./Button Maker_files/colorpicker.js"></script>
   
<script type="text/javascript" src="./Button Maker_files/buttonmaker.js"></script>
<script type="text/javascript" async="" src="./Button Maker_files/bsa.js"></script><script type="text/javascript" async="" src="./Button Maker_files/ga.js"></script><style id="the-style" type="text/css">.button {      border-top: 1px solid #96d1f8;     background: #65a9d7;     background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));     background: -webkit-linear-gradient(top, #3e779d, #65a9d7);     background: -moz-linear-gradient(top, #3e779d, #65a9d7);     background: -ms-linear-gradient(top, #3e779d, #65a9d7);     background: -o-linear-gradient(top, #3e779d, #65a9d7);     padding: 5px 10px;     -webkit-border-radius: 8px;     -moz-border-radius: 8px;     border-radius: 8px;     -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;     -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;     box-shadow: rgba(0,0,0,1) 0 1px 0;     text-shadow: rgba(0,0,0,.4) 0 1px 0;     color: white;     font-size: 14px;     font-family: Georgia, serif;     text-decoration: none;     vertical-align: middle;} .button:hover {      border-top-color: #28597a;     background: #28597a;     color: #ccc;} .button:active {      border-top-color: #1b435e;     background: #1b435e;} </style><script type="text/javascript" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" src="./Button Maker_files/s_3469a2a501a9e18091036aa0c89f9dcb.js" async="async"></script><style type="text/css" id="bsa_css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}</style></head>

<body>
       
           
<div id="demo-top-bar"><div id="demo-bar-inside"><h2 id="demo-bar-badge">CSS-Tricks Example</h2><div id="demo-bar-buttons"><a class="header-button" href="http://css-tricks.com/css3-button-maker/">← Back to Article</a>   <a class="header-button" href="http://css-tricks.com/examples/">More Demos →</a></div><div id="demo-bar-ad"><div id="bsap_1255488" class="bsap_1255488 bsap"><div class="bsa_it one"><div class="bsa_it_ad ad1 odd" id="bsa_1596776"><a href="http://stats.buysellads.com/click.go?z=1255488&b=1596776&g=&s=&sw=1440&sh=900&br=chrome,15,win&r=0.7552283976692706&link=http://itunes.apple.com/tw/app/databases-pro/id459384871?mt=8" onmouseover="window.status = 'http://itunes.apple.com/tw/app/databases-pro/id459384871?mt=8'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_i"><img src="./Button Maker_files/78606-1317928309.png" width="130" height="100" alt="Database Pro for iPad"></span></a><a href="http://stats.buysellads.com/click.go?z=1255488&b=1596776&g=&s=&sw=1440&sh=900&br=chrome,15,win&r=0.6905954107642174&link=http://itunes.apple.com/tw/app/databases-pro/id459384871?mt=8" onmouseover="window.status = 'http://itunes.apple.com/tw/app/databases-pro/id459384871?mt=8'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_t">Database Pro for iPad</span><span class="bsa_it_d">Browse, search, query and update your database from iPad. Must have for DBA's.</span></a><div style="clear:both"></div></div><span class="bsa_it_p"><a href="http://buysellads.com/buy/detail/1098/zone/1255488?utm_source=site_1098_zone_1255488&utm_medium=website&utm_campaign=imagetext">ads by BSA</a></span></div></div><a href="http://adpacks.com/" id="bsap_aplink">via Ad Packs</a></div></div></div>

   
<div id="page-wrap">
 
       
<div id="button-box">
   
               
<a href="http://css-tricks.com/examples/ButtonMaker/#" class="button" style="top: 236px; left: 199px; ">View the CSS</a>
                       
       
</div>
       
       
<div id="controls">
       
           
<h1>Button Maker</h1>

           
<div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="sizer"><a href="http://css-tricks.com/examples/ButtonMaker/#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 16.666666666666664%; "></a></div>
           
<div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="font-sizer"><a href="http://css-tricks.com/examples/ButtonMaker/#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25%; "></a></div>
           
<div class="sliderBar ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="border-rounder"><a href="http://css-tricks.com/examples/ButtonMaker/#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 20%; "></a></div>
           
           
<div id="colors">
           
               
<div>
                   
<label for="topGradientValue">Top Gradient Color</label>
                   
<input type="text" maxlength="6" size="6" id="topGradientValue" class="pickable" rel="backgroundTop" value="3e779d" style="background: #3e779d;">
               
</div>
               
               
<div>
                   
<label for="bottomGradientValue">Bottom Gradient Color</label>
                   
<input type="text" maxlength="6" size="6" id="bottomGradientValue" class="pickable" rel="backgroundBottom" value="65a9d7" style="background: #65a9d7;">
               
</div>
               
               
<div>
                   
<label for="borderTopColorValue">Top Border Color</label>
                   
<input type="text" maxlength="6" size="6" id="borderTopColorValue" class="pickable" rel="borderTopColor" value="96d1f8" style="background: #96d1f8;">
               
</div>
               
               
<div>
                   
<label for="hoverBackgroundColorValue">Hover Background Color</label>
                   
<input type="text" maxlength="6" size="6" id="hoverBackgroundColorValue" class="pickable" rel="hoverBackground" value="28597a" style="background: #28597a;">
               
</div>
               
               
<div>
                   
<label for="textColor">Text Color</label>
                   
<input type="text" maxlength="6" size="6" id="textColor" class="pickable" rel="textColor" value="white" style="background: white;">
               
</div>
               
               
<div>
                   
<label for="hoverTextColorValue">Hover Text Color</label>
                   
<input type="text" maxlength="6" size="6" id="hoverTextColorValue" class="pickable" rel="hoverColor" value="cccccc" style="background: #cccccc;">
               
</div>
               
               
<div>
                   
<label for="activeBackgroundColor">Active Background Color</label>
                   
<input type="text" maxlength="6" size="6" id="activeBackgroundColor" class="pickable" rel="activeBackground" value="1b435e" style="background: #1b435e;">
               
</div>
           
           
</div>
           
           
<select id="fontSelector">
               
<option value="Helvetica, Arial, Sans-Serif">Helvetica</option>
               
<option selected="seleted" value="Georgia, Serif">Georgia</option>
               
<option value="'Lucida Grande', Helvetica, Arial, Sans-Serif">Lucida Grande</option>
           
</select>
               
       
</div>
       
       
</div>
       
   
<div id="the-css">.button {<br>        border-top: 1px solid #96d1f8;<br>       background: #65a9d7;<br>       background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));<br>       background: -webkit-linear-gradient(top, #3e779d, #65a9d7);<br>       background: -moz-linear-gradient(top, #3e779d, #65a9d7);<br>       background: -ms-linear-gradient(top, #3e779d, #65a9d7);<br>       background: -o-linear-gradient(top, #3e779d, #65a9d7);<br>       padding: 5px 10px;<br>       -webkit-border-radius: 8px;<br>       -moz-border-radius: 8px;<br>       border-radius: 8px;<br>       -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;<br>       -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;<br>       box-shadow: rgba(0,0,0,1) 0 1px 0;<br>       text-shadow: rgba(0,0,0,.4) 0 1px 0;<br>       color: white;<br>       font-size: 14px;<br>       font-family: Georgia, serif;<br>       text-decoration: none;<br>       vertical-align: middle;<br>   }<br> .button:hover {<br>        border-top-color: #28597a;<br>       background: #28597a;<br>       color: #ccc;<br>   }<br> .button:active {<br>        border-top-color: #1b435e;<br>       background: #1b435e;<br>   }<br> </div>
       
       
</body>

</html>
Fancy View Source
Select
Select
Select
Select
Select
Select
Select
Select
Select
Select
Select
Select
Select
Select