Creating a simple 3D button with pure CSS


I'm sure that all of you might have seen a 3D (Three Dimensional) button in a website somewhere. There are many websites which use 3D buttons to grab the user attention;  they are really interesting to check out as well as to create.  So here is my very simple approach to create a 3D looking CSS 3 button. This is the very basic way to create a 3D button in CSS and it does what you expect. It has a 3D appearance; it has a 3D effect when you click on it :)





Here is the demo of the button.

NOTE: This was made only for fun. If you willing to use this in your website, you may consider to modify this.
  
Click!

CODE:
 <html>
    <head>
        <style>
            div { width: 100px;
                  height: 30px;
                  background: #F8D96D;
                  border-bottom: 7px solid #7F5A23;
                  border-left: 3px solid #7F5A23;
                  border-top: 1px solid #7F5A23;
                  border-right: 1px solid #7F5A23;
                  border-radius: 8px;
                  text-align: center;
                  padding-top: 10px;
                  color: #ffffff;
                  font-weight: bold;
                  font-size: 18px;
                  text-shadow: 5;
                  cursor: pointer;
                  text-shadow: 0px 2px 3px #555;
            }

            div:hover {
                background: #F7D86B;
            }
          
            div:active {
                border-top: 4px solid #7F5A23;
                border-bottom: 1px solid #7F5A23;
            }
        </style>
    </head>
    <body>

        <div>
            Click!
        </div>

    </body>
</html>


Please let me know your thoughts about this :)

Online HTML Preview

Online HTML Preview


online html previewHello friends, I developed another interesting tool for you today :)

Here is a little and a simple tool to write and preview html codes on the fly. Just type your html codes inside the textbox and see how it renders your html code below. Have fun…and make use of it.

Don’t forget to share this with your friends ;)


Type your HTML code here


Your Preview



 Tags : online html preview, html preview, online wysiwyg html editor, online html generator, online html editor wysiwyg, online html creator,online html editor with preview, online html text editor,online editor html, wysiwyg html

Oscommerce Password Generator

oscommerce password generator
Here is a little simple online tool for all those who are looking for a way to change the password of your oscommerce user account or your oscommerce admin account. You can simply put in your new password in the text box below, and click the generate button. This tool will generate the (MD5 + salt) hash which you can manually update in the database using phpmyadmin.

Note: Sometimes it might take 3,4 seconds to generate the password. Please be patient :)

Online Oscommerce Password Generator



Enter Your New Password :


Generated Password :

Get template file name in Wordpress easily!


You found a nice template for your Wordpress website, and then you noticed that you want to make some changes in that template to make it friendlier with your website. You have no idea which template file is delivering that content, and you don’t want to mess with a lot of codes to find that file name. You want a method to get the template file name easily.

Ok, here I have found an awesome, yet simple wordpress plugin which will do that task for you. It’s called “What the File!”.  It will show you the name of the template file which delivers the current content. Simple.


get the template file name in wordpress. What the File

First go to this link and Download the plugin. (or directly install it from Wordpress admin)

Once you complete the installation process and enabled the plugin, go to the page which you need to find the template file.

Then on the top admin navigation bar, you will find a new menu item called ‘What the File’. When you click on it, a dropdown menu will open with the template file name :).

You can click on that file name link. It will take you to the wordpress template editor page with that file opened their. All you have to do is edit.

If you wish to edit it outside the Wordpress admin panel, you can get the path and file name, then login through your FTP and make changes and upload it back.

I hope this article will surely save your time :) Please leave a comment to appreciate the time I spent to write this article if it was helpful to you.

Happy template editing ;)