Make CSS Buttons for Your Web Site the Easy Way
Posted on August 26, 2010 at 5:42 am
Writing the HTML code for every little thing on a Web site takes a great amount of time. Many Web site owners use a page maker like Dreamweaver or a host with built-in HTML editors, like Weebly.
Regardless of if you write your own HTML code or use a page designer, you can add custom designed buttons to your site using a nifty tool from PageTutor.com called CSS Button Designer.
Designing buttons is just a matter of selecting a few dropdown menus and checkboxes. The first tab that appears is the Designer tab, which controls how the button looks. Everything here is customizable.
Choose a font size or color, the button width and height, and background color. The border of the button can be completely customized, or you may choose to use a pre-configured style.
Once your button looks the way you want it, click the Mouseover tab. Configurations on this tab tell the button what to do when a visitor’s mouse hovers over the button. It can change font or background colors, change width and height, or even change borders. We choose to make ours turn pink and purple during mouseovers.
Click the Code tab once your mouseover configurations are complete. All that is left is to copy and paste the code into your Web site. The code is two parts: the first is copied and pasted into the Head code of your Web page, the second is pasted where you want the button to appear on the page.
Of course, you will still need to code what you want the button to do (go to a certain page, link to another site—the sky is the limit).
The CSS button designer seems to work best in Internet Explorer. The designer is quick and easy, especially if you have an idea of how you want the button to look before designing it.
The code seems to work well, too. Like all buttons of this kind, expect it to appear a little differently in browsers like Chrome and Opera. The button still works, but the appearance is a bit different.
» Filed Under Cool Websites
Related Posts
- How to create animated menus with Adobe Fireworks
- Two Easy Ways to Hide Your Email Address on a Web Site
- Convert images to text online using Text-Image
- Make an Image Map the Easy Way
- Give a photo rounded corners without Photoshop or CSS