Submit Button Magic

Written by Lynette

Code snippets are back. This week, pick up some simple HTML/CSS code to make those boring grey buttons pop.

Change the color, font and size of your button

<br />
<input style="BORDER-RIGHT: #333333 2px outset; BORDER-TOP: #cccccc 2px outset; BACKGROUND: #c00403; FONT: bold 14px Georgia; BORDER-LEFT: #cccccc 2px outset; WIDTH: 100px; COLOR: #ffffff; BORDER-BOTTOM: #333333 2px outset; LETTER-SPACING: 2px; HEIGHT: 30px;" type="submit" value="Submit" />
 	
        <div class="post_paginate">
           
        </div>          
                          
      </div>                  
           
           
               
      <div class="post_bottom"> 
        <span class="cate"> Category : 
          <a href="http://techbasedmarketing.com/category/tutorials/" title="View all posts in Tutorials" rel="category tag" rel="nofollow">Tutorials</a>        </span>               
              <ul class="bookmark">
      	<li>Share : </li>
    	<li class="i_digg"><a href="http://www.digg.com/post?url=http://techbasedmarketing.com/tutorials/submit-button-magic/653/&title=Submit Button Magic">Digg</a></li>
    	<li class="i_del"><a href="http://del.icio.us/post?url=http://techbasedmarketing.com/tutorials/submit-button-magic/653/&title=Submit Button Magic">del.icio.us</a></li>
      <li class="i_stumbel"><a href="http://www.stumbleupon.com/submit?url=http://techbasedmarketing.com/tutorials/submit-button-magic/653/&title=Submit Button Magic">Stumbleupon</a></li>
      <li class="i_redit"><a href="http://reddit.com/submit?url=http://techbasedmarketing.com/tutorials/submit-button-magic/653/&title=Submit Button Magic">Redit it</a></li>
      <li class="i_twitter"><a href="http://techbasedmarketing.com/tweetit.php?title=Submit Button Magic&url=http://techbasedmarketing.com/tutorials/submit-button-magic/653/">Twitter</a></li>        
     </ul>
      
      </div>
      
      <div class="related">
      <h5>Related Posts</h5>
      <ul>
      <li><a href="http://techbasedmarketing.com/business-blogging/feedburner-adds-add-to-google-button/326/" rel="bookmark" title="Permanent Link: FeedBurner Adds Add To Google Button">FeedBurner Adds Add To Google Button</a></li><li><a href="http://techbasedmarketing.com/business-blogging/wordpress-upload-yes-you-can/925/" rel="bookmark" title="Permanent Link: WordPress Upload: Yes You Can">WordPress Upload: Yes You Can</a></li><li><a href="http://techbasedmarketing.com/tools/dont-make-me-fill-another-form/808/" rel="bookmark" title="Permanent Link: Don’t make me fill another form">Don’t make me fill another form</a></li>      </ul>
      </div>    
                     
    </div>

<li id="dsq-comment-15575471">
				<div id="dsq-comment-header-15575471" class="dsq-comment-header">
					<cite id="dsq-cite-15575471">
						<a id="dsq-author-user-15575471" href="http://www.techbasedmarketing.com/" target="_blank" rel="nofollow">Lynette</a>
					</cite>
				</div>
				<div id="dsq-comment-body-15575471" class="dsq-comment-body">
					<div id="dsq-comment-message-15575471" class="dsq-comment-message">Hey Dana, no problem. That's what I hoped these codes would do. Make it easy for people to add a little punch to their pages.</div>
				</div>
			</li>
			<div id="comment-15575472"></div>

<li id="dsq-comment-15575472">
				<div id="dsq-comment-header-15575472" class="dsq-comment-header">
					<cite id="dsq-cite-15575472">
						<a id="dsq-author-user-15575472" href="http://www.epikardia.com/" target="_blank" rel="nofollow">Dana, Epi Kardia Home Educatio</a>
					</cite>
				</div>
				<div id="dsq-comment-body-15575472" class="dsq-comment-body">
					<div id="dsq-comment-message-15575472" class="dsq-comment-message">I love the button options!  Thanks on behalf of all those who are code-challenged!<br><br>Blessings,<br>Dana<br>Epi Kardia Home Education,LLC<br><a href="http://www.epikardia.com" rel="nofollow">www.epikardia.com</a></div>
				</div>
			</li>
			<div id="comment-15575469"></div>

<li id="dsq-comment-15575469">
				<div id="dsq-comment-header-15575469" class="dsq-comment-header">
					<cite id="dsq-cite-15575469">
						<a id="dsq-author-user-15575469" href="http://www.techbasedmarketing.com/" target="_blank" rel="nofollow">Lynette</a>
					</cite>
				</div>
				<div id="dsq-comment-body-15575469" class="dsq-comment-body">
					<div id="dsq-comment-message-15575469" class="dsq-comment-message">I look forward to seeing some nice buttons on your site LaTara ;)</div>
				</div>
			</li>
			<div id="comment-15575473"></div>

<li id="dsq-comment-15575473">
				<div id="dsq-comment-header-15575473" class="dsq-comment-header">
					<cite id="dsq-cite-15575473">
						<a id="dsq-author-user-15575473" href="http://veganfamilyliving.com/" target="_blank" rel="nofollow">LaTara Ham-Ying</a>
					</cite>
				</div>
				<div id="dsq-comment-body-15575473" class="dsq-comment-body">
					<div id="dsq-comment-message-15575473" class="dsq-comment-message">Thanks Lynette! This is great.</div>
				</div>
			</li>
		</ul>
	</div>
</div>

<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

<input type="hidden" name="aweber_required" value="name,from">
  <input type="hidden" name="custom affiliate" value="">
  
  <p>Get a 12 page report packed with <strong><i>180 Free Tools You Can Use To Build Your Business</i></strong> when you sign up for the <strong>Tech Based Marketing Memo</strong>.</p>
<p>You will also receive regular tips, suggestions, special offers and answers to your technical issues. All you need to do is enter your name and email address below</p>
<div class="sub">
  <label>Name: </label><input type="text" name="name" size="20"><br />

<label>Email: </label><input type="text" name="from" size="20"><br />
 <input class="submit-button" type="image" src="http://techbasedmarketing.com/images/sign-me-up.jpg" name="submit" >
</div>
  </form>
</div>
		</li>
<li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Topics</h2>
		<ul>
	<li class="cat-item cat-item-9"><a rel="nofollow" href="http://techbasedmarketing.com/category/answers-to-your-questions/" title="View all posts filed under Answers To Your Questions">Answers To Your Questions</a>
</li>
	<li class="cat-item cat-item-11"><a rel="nofollow" href="http://techbasedmarketing.com/category/blog/beyond-business/" title="View all posts filed under Beyond Business">Beyond Business</a>
</li>
	<li class="cat-item cat-item-8"><a rel="nofollow" href="http://techbasedmarketing.com/category/blog/" title="View all posts filed under Blog">Blog</a>
</li>
	<li class="cat-item cat-item-1"><a rel="nofollow" href="http://techbasedmarketing.com/category/business-blogging/" title="View all posts filed under Blogging For Business">Blogging For Business</a>
</li>
	<li class="cat-item cat-item-6"><a rel="nofollow" href="http://techbasedmarketing.com/category/cutting-edge/" title="View all posts filed under Cutting Edge">Cutting Edge</a>
</li>
	<li class="cat-item cat-item-268"><a rel="nofollow" href="http://techbasedmarketing.com/category/downloads/" title="View all posts filed under Downloads">Downloads</a>
</li>
	<li class="cat-item cat-item-4"><a rel="nofollow" href="http://techbasedmarketing.com/category/email-marketing/" title="View all posts filed under Email Marketing">Email Marketing</a>
</li>
	<li class="cat-item cat-item-18"><a rel="nofollow" href="http://techbasedmarketing.com/category/plugins/" title="View all posts filed under Plugins">Plugins</a>
</li>
	<li class="cat-item cat-item-19"><a rel="nofollow" href="http://techbasedmarketing.com/category/podcast/" title="View all posts filed under podcast">podcast</a>
</li>
	<li class="cat-item cat-item-5"><a rel="nofollow" href="http://techbasedmarketing.com/category/tools/" title="View all posts filed under Tools">Tools</a>
</li>
	<li class="cat-item cat-item-15"><a rel="nofollow" href="http://techbasedmarketing.com/category/tutorials/" title="View all posts filed under Tutorials">Tutorials</a>
</li>
	<li class="cat-item cat-item-27"><a rel="nofollow" href="http://techbasedmarketing.com/category/wordpress-themes/" title="View all posts filed under WordPress Themes">WordPress Themes</a>
</li>
		</ul>
</li>
<li id="text-241556931" class="widget widget_text"><h2 class="widgettitle">Follow Me Around The Web</h2>
			<div class="textwidget"><ul>
<li><a href="http://twitter.com/lynettechandler"><img src="http://techbasedmarketing.com/images/twitter-48x48.png" alt="Lynette's Twitter Stream" width="48" height="48" border="0" style="vertical-align: middle;" /></a>  <a href="http://lynettechandler.com/twitter/">Follow me on Twitter</a></li>
<li><a href="http://lynettechandler.com/facebook/"><img src="http://techbasedmarketing.com/images/facebook-48x48.png" alt="TechBasedMarketing on FB" width="48" height="48" border="0" style="vertical-align: middle;" /></a>  <a href="http://facebook.techbasedmarketing.com/">Be a fan on FaceBook</a></li>
</ul></div>
		</li>
<li id="wpp-3" class="widget popular-posts"><h2 class="widgettitle">Popular</h2>

<ul>
<li><a href="http://techbasedmarketing.com/business-blogging/creating-a-separator-line/267/" title="Creating A Separator Line"><span class="wpp-post-title">Creating A Separator Line</span></a> </li>
<li><a href="http://techbasedmarketing.com/tools/how-to-build-tweet-this-links/1014/" title="How To Build Tweet This Links"><span class="wpp-post-title">How To Build Tweet This Links</span></a> </li>
<li><a href="http://techbasedmarketing.com/blog/good-and-free-affiliate-link-cloaker/329/" title="Good And Free Affiliate Link Cloaker"><span class="wpp-post-title">Good And Free Affiliate Link Cloaker</span></a> </li>
<li><a href="http://techbasedmarketing.com/business-blogging/how-to-get-https-on-your-domain/902/" title="How To Get https On Your Domain"><span class="wpp-post-title">How To Get https On Your Domain</span></a> </li>
<li><a href="http://techbasedmarketing.com/tutorials/jazz-up-your-bullet-points/641/" title="Jazz Up Your Bullet Points"><span class="wpp-post-title">Jazz Up Your Bullet Points</span></a> </li>

</ul>
</li>
<li id="text-358461301" class="widget widget_text"><h2 class="widgettitle">Recommended</h2>
			<div class="textwidget"><a href="http://lynettesuggests.com/mozy" rel="nofollow"><img src="http://techbasedmarketing.com/wpengine/wp-content/uploads/2009/11/home-dirt-150x70.png" alt="Mozy backup" border="0"></a><br /><br /><a href="http://techbasedmarketing.com/r/ejunkie.php" target="ejcom" title="Shopping Cart by E-junkie" rel="nofollow"><img src="https://www.e-junkie.com/linkimg/bd49af73b7ca19d19a0fe9c56ad65a3010486/1.gif" border="0" alt="E-junkie Shopping Cart and Digital Delivery"></a></div>
		</li>
  </ul>
  
  	</div>
  </div>
  </div>
  
  </div>

</div>

<div id="footer" class="clearfix">
  <div id="footer-in">
  
  	<p>Copyright 2004 - <script type="text/javascript">
var d = new Date()
document.write(d.getFullYear())
</script> * MarketingRight.com * PO Box 542 * Havelock, NC 28532 * 1 (252) 649 0559</p>

<ul id="flinks">
       <li><a href="/who-is-lynette-chandler/" title="About">About</a></li>
       <li><a href="http://www.techbasedsupport.com" title="Contact">Contact</a></li>
       <li><a href="http://techbasedmarketing.com/web-site-terms-of-use/" title="Terms of Use">Terms of Use</a></li>
       <li><a href="http://techbasedmarketing.com/disclosure/">Disclosure</a></li>
       <li><a href="http://www.techbasedaffiliates.com" title="Affiliate Program">Affiliate Program</a></li>
    </ul>

  
    
   </div>  
</div>
<script language="javascript" src="http://marketingright.com/2/aff.js"></script>

<script type="text/javascript">
_qoptions={
qacct:"p-9cFYRxTwb6Zcs"
};
</script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<noscript>
<img src="http://pixel.quantserve.com/pixel/p-9cFYRxTwb6Zcs.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/>
</noscript>

<script type="text/javascript" src="http://cetrk.com/pages/scripts/0003/4433.js"> </script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-103444-1");
pageTracker._trackPageview();
} catch(err) {}</script></body>
</html>