Posts Tagged ‘Hacks’
5 Cool CSS Hacks & Tricks
Written by Jai on February 17, 2008 – 2:15 pm - 3,781 views
1. Create a stunning 3D push button…
Nowadays, we can see 3d push buttons nearly everywhere. Most of them are achieved via JavaScript. The main problem of using these scripts is that there are greater chances that they might get blocked by the browser. And with the advent of many ad blockers it has become a serious drawback. In this situation, the CSS comes to rescue. Thought we can’t create 3d push buttons as professional as created by using JavaScript, we can create a basic 3d push button with the help of CSS.
The main CSS commands you’ll need are:
<font color="#0000ff"><code>a.pushbut {</code></font><font color="#0000ff"> </font><font color="#0000ff">color:#26a;</font><font color="#0000ff"> </font><font color="#0000ff">display:block; </font><font color="#0000ff">border:1px solid; </font><font color="#0000ff">border-color:#aaa #000 #000 #aaa; </font><font color="#0000ff">text-decoration:none;</font><font color="#0000ff"> </font><font color="#0000ff">width:8em; text-align:center;</font><font color="#0000ff"> </font><font color="#0000ff">height:2em; line-height:2em;</font><font color="#0000ff"> </font><font color="#0000ff">background:#fc0; font-weight:bold</font><font color="#0000ff"> </font><font color="#0000ff">}</font><font color="#0000ff">a.pushbut:hover</font><font color="#0000ff"> </font><font color="#0000ff">{</font><font color="#0000ff"> </font><font color="#0000ff">color:#26a;</font><font color="#0000ff"> </font><font color="#0000ff">background:#ffd633;</font><font color="#0000ff"> </font><font color="#0000ff">position:relative;</font><font color="#0000ff"> </font><font color="#0000ff">top:1px;</font><font color="#0000ff"> </font><font color="#0000ff">left:1px;</font><font color="#0000ff"> </font><font color="#0000ff">border-color:#000 #aaa #aaa #000 </font><font color="#0000ff">}</font>
^^These must be within <style> tag.
Off course, you can change any settings you want like back color, alignment etc.
Now to create a button, we must specify the class object as push but within the <BODY> tag…that’s all
Ex:
<p><a href=”http://www.blogohblog.com/” onclick=”return false” onkeypress=”return false” title=”visit my blog” class=”pushbut”>Visit blogohblog</a></p>
In order to view how the above example looks, click here
To view the complete source of the above example, click here
If you enjoyed this post, make sure you subscribe to my RSS feed!
