• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

tutsdaddy.com

tech blog

  • Home
  • How To
  • Top 10
You are here: Home / Uncategorized / CSS3 Button Maker

CSS3 Button Maker

December 23, 2013 by Ravva Leave a Comment


CSS3 Button Maker Screen Shot

Today we are going see and how to make a nice CSS3 Button Maker with three different styles viz., Glassy look, 3d look and Flat look.

Every website need a button for different purpose like form submission, navigation.. etc. I get bored by seeing the normal look of button so we go for customization and developed a Tool, when I am working for the project of css-factory.com. By this tool we can create awesome buttons by your creativity.

The contents required for button style is Button size, color , font-family etc. Our three styles are made using these contents and some external functionality.

The functionality is simple and is to develop:

Take a variable:

[code lang=”html”]
var text="";
[/code]

Give your style content to this variable as string

[code lang=”html”]
text=".glassy{";
text+="font-size:"+value+"px;";…………..
[/code]

Update this string every time when on change occurs by

[code lang=”html”]
$("style").replaceWith("<style>"+text+"</style>");
[/code]

Style developed by this CSS3 Button Maker is Compatible IE10+, Chrome and Mozilla

CSS3 Button Maker : Demo

Filed Under: Uncategorized

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • Top 10 Books for Coding Interview preparation
  • How to view copied items list using Clipboard history in Windows 10
  • How to copy text from images using OneNote
  • How To Create Fire Effect on Text in Photoshop
  • How to Create Fireworks in Photoshop

Categories

Copyright © 2023 TutsDaddy.com