1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Please donate today & help us with our growing server costs or buy premium for access to our premium products
    Dismiss Notice

Free CSS3 Firefox Button

Discussion in 'vBulletin Template Mods & Extras' started by HAWK, Mar 23, 2016.

  1. HAWK

    HAWK Administrator Staff Member ADMIN

    Likes Received:
    575
    Trophy Points:
    113
    Gender:
    Male
    Do you want to show the Firefox button in the forum?

    8170

    let's get started!

    1- yoursite/admincp
    2- Styles & Templates / Style Manager

    3:

    8171

    4:

    8172

    5:

    8173


    /* firefox button */
    .demo-info {
    padding: 14px 26px;
    font-size: 14px;
    line-height: 100%;
    text-shadow: 0 1px rgba(0, 0, 0, 0.4);
    color: #fff;

    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.1s ease-in-out;
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition: background 0.1s ease-in-out;
    -ms-transition: background 0.1s ease-in-out;
    -o-transition: background 0.1s ease-in-out;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    color: #fff;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;
    }
    .demo-info:active {
    padding-top: 15px;
    }
    .demo-info, .demo-info:hover, .demo-info:active {
    outline: 0 none;
    text-decoration: none;
    color: #fff;
    }
    .demo-info-1 {
    background-color: #fdc058;
    box-shadow: 0px 3px 0px 0px #e29003;
    }
    .demo-info-1:hover {
    background-color: #fdb53a;
    }
    .demo-info-1:active {
    box-shadow: 0px 1px 0px 0px #e29003;
    }
    .demo-info-2 {
    background-color: #aa65c7;
    box-shadow: 0px 3px 0px 0px #883da7;
    }
    .demo-info-2:hover {
    background-color: #9e4fbf;
    }
    .demo-info-2:active {
    box-shadow: 0px 1px 0px 0px #883da7;
    }
    .demo-info-3 {
    background-color: #2ecc71;
    box-shadow: 0px 3px 0px 0px #239a55;
    }
    .demo-info-3:hover {
    background-color: #28b363;
    }
    .demo-info-3:active {
    box-shadow: 0px 1px 0px 0px #239a55;
    }
    /* firefox button */
    .ff {
    background-image:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    background-image:-moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    background-image:-ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    background-image:-o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    background-image:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
    display:inline-block;
    vertical-align:middle;
    margin:2px;
    font:italic 14px/32px Georgia,Serif;
    text-align:center;
    color:white;
    text-decoration:none;
    text-shadow:0px 1px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
    box-shadow:inset 0px -3px 0px rgba(0,0,0,0.1), 0px 3px 0px rgba(0,0,0,0.1);
    padding:0px 15px 3px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    }

    .ff.green {background-color:#82C43A;}
    .ff.red {background-color:#F5494C;}
    .ff.blue {background-color:#659AE0;}

    .ff:hover {
    background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
    background-image:-moz-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
    background-image:-ms-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
    background-image:-o-linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
    background-image:linear-gradient(top, rgba(0,0,0,0.05), rgba(0,0,0,0.2));
    }

    .ff:active {
    position:relative;
    top:2px;
    -webkit-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
    box-shadow:inset 0px -1px 0px rgba(0,0,0,0.1), 0px 2px 0px rgba(0,0,0,0.1);
    }6- Homepage / Edit Site / Edit Page
    -Static HTML Module select
    --Edit
    Title: Enter the title
    Paste the following code into the HTML field.
    and save


    <a class="ff blue" href="#">
    Sign me up &raquo;</a> <!-- Firefox SignUp -->
    <a class="ff red" href="#">Take Action Now!</a> <!-- Firefox SOPA -->
    <a class="ff green" href="#">Download Button</a> <!-- Firefox Download -->

    and a happy ending

    8174
    Blue Button


    <a class="ff blue" href="#">Sign me up &raquo;</a> <!-- Firefox SignUp -->

    Red button


    <a class="ff red" href="#">Take Action Now!</a> <!-- Firefox SOPA -->

    Green Button


    <a class="ff green" href="#">Download Button</a> <!-- Firefox Download -->

    Button Links


    href="#<b>Button links?
    PHP Code:
    </b>"
     

Share This Page