1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. If you want premium products then purchase our VIP or SVIP plans
  3. Dont forget read our rules HERE Also anyone caught Leeching this content or Scamming will be banned on numerous networks.
    Dismiss Notice
  4. Dont forget we do not allow Multiple Accounts, so all of your accounts as well as your IP will be banned.
    Dismiss Notice
  5. Tired of Download Limits ? UPGRADE Today!
    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:
    1,143
    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

Post thread