asked on

html css button styling

I have a html page called ButtonTest.html

Here is the code for it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
/* In Firefox, the button element gets a bit of extra height that you can partially eliminate using this declaration */  
button::-moz-focus-inner {
  border: 0; }

/* skip (inspired by okcupid iphone interface)
*******************************************************************************/
button.skip {
  background-color: #8c9cbf;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8c9cbf), color-stop(50%, #546a9e), color-stop(50%, #36518f), color-stop(100%, #3d5691));
  background-image: -webkit-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -moz-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -ms-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: -o-linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  background-image: linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
  border: 1px solid #172d6e;
  border-bottom: 1px solid #0e1d45;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 0 0 #b1b9cb;
  -moz-box-shadow: inset 0 1px 0 0 #b1b9cb;
  box-shadow: inset 0 1px 0 0 #b1b9cb;
  color: #fff;
  font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #000f4d;
  width: 150px; }
  button.skip:hover {
    background-color: #7f8dad;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8dad), color-stop(50%, #4a5e8c), color-stop(50%, #2f477d), color-stop(100%, #364c80));
    background-image: -webkit-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -moz-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -ms-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: -o-linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    background-image: linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
    cursor: pointer; }
  button.skip:active {
    -webkit-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
    -moz-box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white;
    box-shadow: inset 0 0 20px 0 #1d2845, 0 1px 0 white; }

/* disabled button styles
   works with this markup: <button disabled="disabled">Submit</button>
*******************************************************************************/
button[disabled],
button[disabled]:hover,
button[disabled]:active {
  background: #999;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #aaa;
  cursor: not-allowed;
  text-shadow: none; }



button {
  margin-top: 60px; }


</style>
</head>

<body>


<button class="skip" id="Button1">Button1</button>
<p><br />
  <br /><br /><br />
  <input id="Button2" type="button" value="Button2" class="skip" />
  
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Open in new window

When I run my page i get this:

I simply have two buttons on my page and I'm trying to style both buttons using CSS.

Button 1 worked.

But my problem is styling button2. Button2 should look just like Button.

Anyone know where I'm making a mistake. How do I fix it to add the same navy blue style that button1 has to button2?

ASKER CERTIFIED SOLUTION

Shaun Kline

membership

This solution is only available to members.

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

Start Free Trial

dimmergeek

If you want the same style applied to both BUTTONS, make sure tha Button2 is actually a button. This will allow you to keep your CSS for just one type of element in case you want a separate style for <input? later...

<button class="skip" id="Button2">Button2</button>

Open in new window