How to assign color obtained by CSS gradient generator


Tags: jquery,css

Problem :

I am using CSS gradient generator color in a button in my website.When user hovers mouse over the button,color changes to red and then after mouse is not over button,I want color generated by CSS gradient generator.

The code provided by CSS gradient generator is

background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0, #423F42),
color-stop(1, #E3E3E3)
);
background-image: -o-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
background-image: -moz-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
background-image: -webkit-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
background-image: -ms-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
background-image: linear-gradient(to right bottom, #423F42 0%, #E3E3E3 100%);

The Jquery code used for changing color when mouse hovers over button is

$(document).ready(function(){
function mOver(obj) {
obj.style.background = "CSS gradient color";
}

function mOut(obj) {
 obj.style.background = "#586161";
}
});

How do I achieve this



Solution :

The simple solution is to not use Javascript for something that should be handled with CSS.

button {
    background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0, #423F42),
    color-stop(1, #E3E3E3)
    );
    background-image: -o-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
    background-image: -moz-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
    background-image: -webkit-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
    background-image: -ms-linear-gradient(right bottom, #423F42 0%, #E3E3E3 100%);
    background-image: linear-gradient(to right bottom, #423F42 0%, #E3E3E3 100%);
}

button:hover {
    background: red;
}
<button>button</button>


    CSS Howto..

    How do I use CSS to keep multiple images relatively sized withing the same outer element?

    How to create image curved using css or jquery (See picture)

    How to start css and html

    How to create live event for css

    How to prevent bootstrap css class to override my custom css class

    CSS: how to make the font icon and text under it closer?

    How to reveal content behind a div with pure css?

    Show Div When Click Link Button

    How to smoothly animate height in CSS or Javascript on mobile devices

    How to insert spaces/tabs in text using HTML/CSS?

    How to select multiple elements using CSS

    How to reset the CSS of HTML Elements?

    How to write below CSS lines in zend framework 2 syntax?

    How do you make an input element fill parent?

    How to make a descriptions list inline?

    how do i remove the tab from this css megamenu

    How to pass to next line that cutted elements in a list?

    How to avoid using JavaScript with CSS attribute selector

    CSS: How to drill all the underlying layers up to the background?

    How to create a header that changes as you scroll down the page? [duplicate]

    How to make gradual colour change when hover with CSS?

    How to add colour classes to this css

    how to edit the width of menu bar in dreamweaver

    How do you make speech bubble with Tooltipsy?

    How to make specific areas in a div clickable with css / js / anything

    How to make a background using CSS gradient with flat color?

    Border of outer element affects how margin of inner element is displayed, why?

    What's causing my hover image not to show it's transparency? [closed]

    How to move Woocommerce Description tab below review tab

    How do I center my responsive form and align it evenly with everything else?