How can I have multiple jQuery button styles on one page?


Tags: javascript,jquery,css,jquery-ui

Problem :

I'm using the following external CSS files:

<link href="/jquery_custom/green/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="/jquery_custom/css/blue/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" /></script>

And JavaScript:

<script language = "javascript" type="text/javascript">
    $(document).ready(function () {
        $("button").button();
    }); 
</script>

I have noticed on the jQuery UI site there is an Advanced option:

jQuery site Advanced options

What do I need to do to have more than one style one the page? Including the two separate external ui-custom js files cause problems. And I notice Facebook has two different colored buttons:

Facebook homepage with two different colored buttons

How can this be done?



Solution :

You mean have different colors/styles for each button? You can do that with just CSS, like so:

CSS

a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}


a.red {
    color:#fff;
    background: red;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#FF0000),to(#F1F1F1));
}

a.green {
    background: #7FFF24;
     background: -webkit-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
     background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#7FFF24),to(#F1F1F1));
}

HTML

<a href="#" class="button">Gray Button</a>
<a href="#" class="button red">Red Button</a>
<a href="#" class="button green">Green Button</a>

Demo


    CSS Howto..

    How to make a sliding menu similar to the Facebook Mobile side menu with html,css,jquery?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to center something I appended with js and also replace it

    CSS: How to make custom file upload button take full width (button works)

    How to remove css files?

    How to include this basic html (CSS, JavaScript) template into a php file?

    How to add styles based on whether top element is empty

    Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

    How to hide a nested table?

    How to apply css using ng-class in angularjs

    Normalize.css how to use it?

    How to put a
  • over an
    • Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

      How can I apply my CSS stylesheet to an RSS feed

      multiple CSS classes, how they work and WHY do it this way? [duplicate]

      How to centre a table in html using css file? [duplicate]

      How to change the css and html file at the same time

      how to animate “simple jquery filtering” by using css only

      css: how to build centered div with minimum spacing on the left

      How to add css loading animation in ajax beforeopen page

      How to change the arrow color of ' select' in a form with CSS [duplicate]

      How to do line animation using CSS and SVG

      How to split page in half using CSS?

      How can I force an image to display in its entirety with CSS?

      How to use 3-digit color codes rather than 6-digit color codes in CSS?

      CSS - How to change backgound colour for item avatar in ionicframework?

      How to reduce amount of space between lines of text

      How to Apply CSS to element added by Javascript

      CSS: How to fix overlapping divs

      How Do I Trigger My jQuery Event?