Header Ads

  • Breaking News

    CSS3 Lit Demo and Download Buttons

    Blogs related to development often use 'Demo' and 'Download' buttons to show up their widgets and plugins that they are sharing on their blog posts. Demo button has a great significance when it comes to the popularity a certain widget seems to get as people like tools and plugins running live, that makes them know the widgets much better. Many widgets now days are powered by CSS3 styling and thus readers can only get to feel their class once they see those crazy effects via the Demo link, otherwise a static image wont perform the job in the best of the ways.


    <div class="both" id="downloadDemo">
               
                <a target="_blank" class="greenButton demo" href="Demo Link">Demo</a><a class="greenButton download" href="Download Link ">Download</a>           
                    <div class="line"></div>
                </div>
     
    <style>
    a.greenButton {
        background: url("http://3.bp.blogspot.com/-J28017_bZoc/UHKQV6QnisI/AAAAAAAAG_E/38oflRWPZgw/s1600/demo_download_buttons.png") no-repeat scroll 0 0 transparent;
        display: block;
        height: 68px;
        outline: medium none;
        text-indent: -9999px;
        width: 202px;
    }
    a.greenButton.demo {
        background-position: left top;
    }
    a.greenButton.demo:hover {
        background-position: left bottom;
    }
    a.greenButton.download {
        background-position: right top;
    }
    a.greenButton.download:hover {
        background-position: right bottom;
    }
    #downloadDemo {
        height: 70px;
        margin: 25px auto 40px;
        position: relative;
        width: 465px;
    }
    #downloadDemo .line {
        bottom: -33px;
        position: absolute;
        width: 100%;
    }
    #downloadDemo.both a {
        float: left;
        margin-left: 20px;
    }
    #downloadDemo.single a {
        left: 50%;
        margin-left: -101px;
        position: absolute;
    }
    #downloadDemo.none {
        height: 0;
        margin: 0 auto 50px;
    }
    #downloadDemo a {
        border: medium none;
        border-radius: 7px 7px 7px 7px;
        box-shadow: 0 1px 1px #CCCCCC;
    }
     
    </style>
    
    To use these buttons in your blog posts, simply place the above code in your Edit HTML section of your blog posts and update the Demo and Download links to point towards your widgets/ plugins.
    For each of the buttons, you have to place their respective codes in your blog posts HTML section as shown in the picture below. Though you can place the CSS part of the buttons in your template for once, i.e before ]]</b:skin> section, but that doesn't work for many people, though you may try that too

    No comments

    Post Top Ad

    Post Bottom Ad