CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 657

css styling issue, for buttons

Ive been trying to give style to button, The code that I ve used is 

#srchBtn
{
    width:120px;
    height:25px;
    vertical-align:middle;
    margin-top:10px;
    font-family:Tahoma;
    font-size:15px;
    border: 1px solid orange;
    background-color: red;
    color: white;
    text-shadow: 0 1px 1px black;
    padding: 5px 30px;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px orange, 0 2px 1px black;
   -o-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px orange, 0 2px 1px black;
   -webkit-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px orange, 0 2px 1px black;
   -moz-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px orange, 0 2px 1px black;
}

but it takes away the clickable property of button, it acts like an image. when we try clicking on it, it doesnt act like a button.. what could be wrong??

Upvotes: 0

Views: 125

Answers (4)

kolin
kolin

Reputation: 2344

i'd take away the id element, and make it a class. just in case you decide to have more than one button on your page. then you can keep all the buttons on your site uniform and intuitive.

.srchBtn{} //also include cursor:pointer

.srchBtn:hover{}

Upvotes: 0

deathlock
deathlock

Reputation: 2837

By "act like a button", do you mean makes it looks like clickable?

Most possibly because the button does not have its active (clicked) state. Normally, un-styled button will have its active state, styled by the browser the user is using. But since you already styled almost every aspect of your button, the browser won't add additional styling.

To add your own active (clicked state), use this:

#srchBtn:active { }

You could also add its hover-ed state with this:

#srchBtn:hover { }

Upvotes: 1

Harti
Harti

Reputation: 1520

As soon as you change the appearance of a button, you will also need to change it for the pseudoclasses :active and :hover to have it work as a normal button.

That is to say, your button in fact is a button but it doesn't know what it looks like while clicked (:active) or on mouseover (:hover).

#srchBtn:hover {
    /* your code here */
}

#srchBtn:active {
    /* your code here */
}

Upvotes: 1

Juliyanage Silva
Juliyanage Silva

Reputation: 2699

Is it a javascript function you are calling? If so checkout the script is loaded to your html page and try also with little css properties just width and height, see weather it works or not.

Upvotes: 0

Related Questions