Button Maker Online


	Button Maker Online
oo8oo
5-19-2006 6:47 PM
186 views
tags:
color picker tool
1 Comment |
Add a Comment
5-19-2006 7:03 PM
egoldstein
we need an online marble maker now too
Login to Comment. Not a member yet? Sign up
Today's Top Clips

visit the Top Clips page
View the Top Clips from May 19, 2006
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/83997484-f0e8-4ece-92f9-53b1e231960b/6F28F668-31FF-41B4-B321-A723FB0DAE64/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://tools.dynamicdrive.com/button/" href="http://tools.dynamicdrive.com/button/" style="font-size: 11px;">tools.dynamicdrive.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://tools.dynamicdrive.com/button/"><CENTER>
<div id="container">
    <h2>Button Maker Online <img src="http://tools.dynamicdrive.com/button/../beta.gif"></h2>
		<p>Use this online tool to easily and visually create those popular "XHTML valid" micro buttons (80x15). You can also opt for the larger 88x31 button instead. Enjoy!</p> <table id="stack" border="0" cellpadding="5" cellspacing="0"><col style="width: 50%;">
    <col style="width: 50%;">
    <tbody><tr><td colspan="2" class="rightcell-dark"><table class="columns" border="0" cellpadding="5" cellspacing="0"><col class="column-1">
        <col class="column-2">
        <col class="column-3">
        <tbody><tr><td class="cell"><div class="option-centered"><input id="base-color-transparent" checked="checked" type="checkbox">Base Color is Transparent</div>
        </td><td class="cell"><div class="option-left"><span class="disabled-text" id="base-color-label">Base Color: </span></div>#<input disabled="disabled" id="base-color" value="FFFFFF" class="input-field-small"   type="text"> <span style="background-color: rgb(255, 255, 255);" id="colorbox1" class="colorbox">___</span>
        </td><td class="rightcell"><div class="option-left">Font: </div><select id="font" class="input-select"><option value="slkscr">Silkscreen</option><option value="sans-serif">Sans-Serif</option></select>
        </td></tr><tr><td class="cell"><div class="option-centered"><input id="border-color-transparent" type="checkbox">Border Color is Transparent</div>
        </td><td class="cell"><div class="option-left"><span class="enabled-text" id="border-color-label">Border Color: </span></div>#<input id="border-color" value="898E79" class="input-field-small"   type="text"> <span style="background-color: rgb(137, 142, 121);" id="colorbox2" class="colorbox">___</span>
        </td><td class="rightcell">&nbsp;
        </td></tr><tr><td class="cell"><div class="option-left">Button Size: </div><div class="option-right"><select id="button-size" class="input-select"><option value="80" selected="selected">80 x 15 pixels</option><option value="88">88 x 31 pixels</option></select></div>
        </td><td class="cell"><div class="option-centered"><input id="rounded-corners" disabled="disabled" type="checkbox"><span class="disabled-text" id="rounded-corners-label">Rounded Corners</span></div>
        </td><td class="rightcell"><div class="option-centered"><input id="two-rows" disabled="disabled" type="checkbox"><span class="disabled-text" id="two-rows-label">Use two rows for text</span></div>
        </td></tr><tr><td class="bottomcell"><div class="option-centered"><input id="vbar-color-transparent" checked="checked" type="checkbox"><span id="vbar-color-transparent-label">Vertical Bar Color is Transparent</span></div>
        </td><td class="bottomcell"><div class="option-left"><span class="disabled-text" id="vbar-color-label">Vertical Bar Color: </span></div>#<input id="vbar-color" value="FFFFFF" class="input-field-small" disabled="disabled"   type="text"> <span style="background-color: rgb(255, 255, 255);" id="colorbox3" class="colorbox">___</span>
        </td><td class="bottomrightcell"><div class="option-left"><span class="enabled-text" id="vbar-position-label">Vertical Bar Position: </span></div><div class="option-right"><input id="vbar-position" value="30" class="input-field-small"   type="text"></div>
</td></tr><!-- This is the bottom row code if you want to insert your own slider. Make sure you change the "onchange" for id="vbar-position" so it changes your slider's value.
<tr><td class="bottomrightcell"><div class="option-centered" style="text-align: right;"><span id="vbar-position-label">Vertical Bar Position</span></div>
</td><td class="bottomrightcell"><div class="option-centered"> SLIDER GOES HERE </div>
</td><td class="bottomrightcell"><div class="option-centered" style="text-align: left;"><input id="vbar-position" type="text" value="30" class="input-field-small"  ></div>
</td></tr> -->
</tbody></table></td></tr></tbody></table><table><tbody><tr><td id="lowerlefttd" style="padding: 5px; width: 50%;" valign="top"><h3>Left Side Text:</h3>
        <div class="option-centered"><input id="left-text" value="rss" class="input-field" type="text"></div>
        <p></p><div class="option-left">Background Color: </div><div class="option-right">#<input id="left-bg-color" value="FF6600" class="input-field-small"   type="text"> <span style="background-color: rgb(255, 102, 0);" id="colorbox4" class="colorbox">___</span></div>
<div class="option-left">Text Color: </div><div class="option-right">#<input id="left-text-color" value="FFFFFF" class="input-field-small"   type="text"> <span style="background-color: rgb(255, 255, 255);" id="colorbox5" class="colorbox">___</span></div>
<h3>Right Side Text:</h3>
        <div class="option-centered"><input id="right-text" value="button" class="input-field" type="text"></div>
        <p></p><div class="option-left">Background Color: </div><div class="option-right">#<input id="right-bg-color" value="898E79" class="input-field-small"   type="text"> <span style="background-color: rgb(137, 142, 121);" id="colorbox6" class="colorbox">___</span></div>
<div class="option-left">Text Color: </div><div class="option-right">#<input id="right-text-color" value="FFFFFF" class="input-field-small"   type="text"> <span style="background-color: rgb(255, 255, 255);" id="colorbox7" class="colorbox">___</span></div>
<p>
</p><h3 style="border-bottom: 1px solid rgb(204, 204, 204);">Preview</h3>
        <div class="option-left"><img id="preview" src="http://tools.dynamicdrive.com/button/image.php?border_color=898E79&amp;base_color=transparent&amp;font=slkscr&amp;vbar=30&amp;size=80&amp;rounded=1&amp;rows=1&amp;vbar_color=transparent&amp;ltext=rss&amp;lbgcolor=FF6600&amp;ltextcolor=FFFFFF&amp;rtext=button&amp;rbgcolor=898E79&amp;rtextcolor=FFFFFF" style="border: medium none ;"></div><div style="float: right; padding-right: 1em;"><input id="update" value="Update" class="input-button" type="button"></div><br style="clear: both;">
<div style="font-size: 90%; padding-top: 1em;">* Right click image and choose "Save As" to download image.</div>
</td><td id="colorpickertd" style="padding: 5px; width: 50%;" valign="top"><div id="content">
    <b>Color Picker</b>
      <p>
      Click on any text fields on this page that require a color input, and use the below to easily pick a color.
      </p> <div id="pickerPanel" class="dragPanel">
            <h4 id="pickerHandle">&nbsp;</h4>
            <div style="background-color: rgb(255, 0, 0);" id="pickerDiv">
              <img id="pickerbg" src="http://tools.dynamicdrive.com/button/colorpicker/img/pickerbg.png" alt="">
              <div style="left: 0px; top: 0px;" id="selector"><img src="http://tools.dynamicdrive.com/button/colorpicker/img/select.gif"></div>
            </div>
<div id="hueBg">
              <div style="left: 0px; top: 0px;" id="hueThumb"><img src="http://tools.dynamicdrive.com/button/colorpicker/img/hline.png"></div>
            </div>
<div id="pickervaldiv">
                <form name="pickerform"  >
                
R <input name="pickerrval" id="pickerrval" value="0" size="3" maxlength="3" type="text">
                H <input name="pickerhval" id="pickerhval" value="0" size="3" maxlength="3" type="text">
                
G <input name="pickergval" id="pickergval" value="0" size="3" maxlength="3" type="text">
                S <input name="pickergsal" id="pickersval" value="0" size="3" maxlength="3" type="text">
                
B <input name="pickerbval" id="pickerbval" value="0" size="3" maxlength="3" type="text">
                V <input name="pickervval" id="pickervval" value="0" size="3" maxlength="3" type="text">
                

# <input name="pickerhexval" id="pickerhexval" value="0" size="6" maxlength="6" type="text">
                
</form>
            </div>
<div style="background-color: rgb(255, 255, 255);" id="pickerSwatch">&nbsp;</div>
        </div>
</div>
</td></tr></tbody></table></div>
<p id="footer">Copyright ｩ 1998-2006 <a href="http://www.dynamicdrive.com">
Dynamic Drive.</a> Please read <a href="http://dynamicdrive.com/notice.htm">
Terms Of Use here</a> before using any of the scripts.</p> </CENTER></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/6F28F668-31FF-41B4-B321-A723FB0DAE64/blog/" title="blog or email this clip"><img src="http://content6.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
New from the makers of Clipmarks: Amplify.com - Don't just share the news...Amplify it!
Clipmarks: Home; New Clips; Top Clips; Dashboard
Popular Topics: News; Life; Science; Technology; Entertainment
Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch
Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map
About Clipmarks: About Us; Contact; Copyright; Privacy; EULA
Search Options

Today's Top Clips
