asked on

How to set backgroundcolor of button without changing the 3D style of the button?

Hi,

I have a button on form, and I want to change its background color when onmouseover/onfocus event.
I have done it using below attached.

The problem is the button change to flat style.

Please help how to solve this problem.

Thank you.

function Set_Button_BackColor(e)
        {          
            var button = document.getElementById(e);
               button.style.backgroundColor = 'blue';         
        }
        
        
     function Clear_Button_BackColor(e)
        {          
            var button = document.getElementById(e);
               button.style.backgroundColor = 'white';         
        }

Open in new window

hielo

>>without changing the 3D style of the button
How are you creating this 3D effect? Perhaps with a background image? If so, you would need a "clone" of that 3D image but with the desired different color. Then on your function you would change:
button.style.backgroundColor ='blue';

to:
button.style.backgroundImage='my3DImage.gif';

Sammy

Try this class
usually combining the width and the border-style:outset make up the 3D look

<style type="text/css">
    .btn
    {
text-decoration:none;
font-weight:bold;
border:3px solid;
padding:2px;
border-color:#f8f8ff #f8f8ff #f8f8ff #f8f8ff;
background:#fff;
  border-style: outset;
    }
    </style>

Open in new window

emi_sastra

ASKER

Hi Hielo,

I don't use gif. It is default of button of asp. and don't want to use gif.

Thank you.

emi_sastra

ASKER

Hi Sam,

Let me try first.

hielo

OK. Then applying a class as suggested by sammy1971 is a reasonable approach. Then your functions would be:

function Set_Button_BackColor(e)
{
var button = document.getElementById(e);
button.className += " btn";
}

function Clear_Button_BackColor(e)
{
var button = document.getElementById(e);
button.className = button.className.replace(/ btn/g,'');
}

emi_sastra

ASKER

Hi Sam,

The code you gave me generate square button.
How to make to round corner of the button?

Thank you.

emi_sastra

ASKER

Hi Hielo,

Have you try to do so using asp net button?. Is it true it is 3D like button like the button here "Accept as Solution" although the color is different/

Could we just change the back ground color without have to change it to flat?
Why it is change to falt after we set the back ground color?

Thank you.

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

emi_sastra

ASKER

Thank you.