Search Options
close
Search the following clips:
All Clips
Everyone's Clips
My Guides
Sign Up
Install
Learn More
Login
Button Maker Online
oo8oo
follow
1
5-19-2006 7:34 PM
437 views
tags:
examples
,
css
,
color picker tool
,
image link php
2 Comments
|
Add a Comment
5-19-2006
7:35 PM
aerynvala
fun
5-19-2006
7:51 PM
oo8oo
this tool so usefull and good design
Login
to Comment. Not a member yet?
Sign up
Today's Top Clips
Woman Swallowed Whole by Leopard
While we get out our cookie cutters, they endure 'clit' cutting
Our Churches Are Dead
I Think Somebody Is Confused
Women in Art
25 Holiday Wallpapers from Abduzeedo
Support the Troops!
A hero-surgeon
Woman sold in public auction in Pakistan -- for $3,200
Beautiful Wish Flowers
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/3156f41b-1fc5-4a8e-8039-bdd495fe3aee/C7D86761-FCF5-4575-AF10-172A99449B20/" 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://clipmarks.com/view_clip.aspx?nav=true&guid=6F28F668-31FF-41B4-B321-A723FB0DAE64" href="http://clipmarks.com/view_clip.aspx?nav=true&guid=6F28F668-31FF-41B4-B321-A723FB0DAE64" style="font-size: 11px;">clipmarks.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://clipmarks.com/view_clip.aspx?nav=true&guid=6F28F668-31FF-41B4-B321-A723FB0DAE64"><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"> </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&base_color=transparent&font=slkscr&vbar=30&size=80&rounded=1&rows=1&vbar_color=transparent&ltext=rss&lbgcolor=FF6600&ltextcolor=FFFFFF&rtext=button&rbgcolor=898E79&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"> </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"> </div> </div> </div> </td></tr></tbody></table></DIV></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;"> </td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/C7D86761-FCF5-4575-AF10-172A99449B20/blog/" title="blog or email this clip"><img src="http://content8.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
OK