Place Your Ads Here 460x68 ads

Create a Multi Color and Size CSS3 Buttons !



Today we are going to create some CSS3 Buttons which are available in multi color and size.  There are lots of tutorials on creating css3 buttons over internet, But we have created our own css3 buttons for our various wordpress themes which we sold on wordpress marketplaces, so we thought why not to share that buttons with you guyz. So lets follow the steps for creating css3 buttons.
First of all we need to have a simple HTML mark up for our button, here we need to define the class for our link.. like the main class as button then the size class as small, medium or large and then the color class as red, blue, green etc etc.

LIVE DEMO

How to Make Create a Multi Color and Size CSS3 Buttons

Go to Blogger Dashboard --> Design --> Edit HTML
Backup your Template before making any changes to your blog
Now   Expand Widget Templates
Find the code shown below using [ctrl+F]

]]></b:skin>

Replace the above code with the code shown below

.button, .button span {
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.button {
    white-space: nowrap;
    line-height:1em;
    position:relative;
    outline: none;
    overflow: visible; /* removes extra side padding in IE */
    cursor: pointer;
    border: 1px solid #999;/* IE */
    border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
    border-bottom:rgba(0, 0, 0, .4) 1px solid;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .1) 0%,
        rgba(0, 0, 0, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(0, 0, 0, .1)),
        to(rgba(255, 255, 255, .1))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
    -moz-user-select: none;
    -webkit-user-select:none;
    -khtml-user-select: none;
    user-select: none;
    margin-bottom:10px;
}
.button.full, .button.full span {
    display: block;
}
.button:hover, .button.hover {
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(255, 255, 255, .1)),
        to(rgba(255, 255, 255, .2))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}
.button:active, .button.active {
    top:1px;
}
.button span {
    position: relative;
    color:#fff;
    text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
    border-top: rgba(255, 255, 255, .2) 1px solid;
    padding:0.6em 1.3em;
    line-height:1em;
    text-decoration:none;
    text-align:center;
    white-space: nowrap;
}
.button.small span {
    font-size:12px;
}
.button.medium span {
    font-size:14px;
}
.button.large span {
    font-size:18px;
}
.button.black {
    background-color: #333333;
}
.button.gray {
    background-color: #666666;
}
.button.white {
    background-color: #FFFFFF;
}
.button.white span{
    color: #666666;
}
.button.red {
    background-color: #e62727;
}
.button.orange {
    background-color: #ff5c00;
}
.button.magenta {
    background-color: #A9014B;
}
.button.yellow {
    background-color: #ffb515;
}
.button.blue {
    background-color: #00ADEE;
}
.button.pink {
    background-color: #e22092;
}
.button.green {
    background-color: #91bd09;
}
.button.rosy {
    background-color: #F16C7C;
}
.button.brown {
    background-color: #804000;
}
.button.purple {
    background-color: #800080;
}
.button.cyan {
    background-color: #46C7C7;
}
.button.gold {
    background-color: #D4A017;
}
 ]]></b:skin>

Now save your template

NOW THE HTML PART

<a class="button small red" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small black" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small gray" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small orange" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small blue" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small purple" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small brown" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small cyan" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small gold" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small rosy" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small green" href="#"><span>http://only4everyone.blogspot.com</span></a>
<a class="button small pink" href="#"><span>http://only4everyone.blogspot.com</span></a>

Replace http://only4everyone.blogspot.com with your link and LINKNAME with the name/title of your link

Different Sizes
 
If you want to re-size the buttons you can modify the red color small text to large,medium like below   
     <a class="button Large pink" href="#"><span>http://only4everyone.blogspot.com</span></a>
    <a class="button Medium pink" href="#"><span>http://only4everyone.blogspot.com</span></a>
Small
Medium 
Large
 Finish

If you like this post please leave a comments below the post subscribe for free updates

Thank you




Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

0 comments:

Post a Comment

loading...
Related Posts Plugin for WordPress, Blogger...