Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 408
  • Last Modified:

html css button styling

Hi Experts,

I have a html page called TestPurpleButton.html
It has a button on it and I'm using css to style it.

This 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 runat="server">
    <title></title>

<style type="text/css">

div.container {
  margin: 20px auto;
  width: 700px;
}

button::-moz-focus-inner {
  border: 0; }

/* purple candy
*******************************************************************************/
button.purple-candy {
  background-color: #9e76e8;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9e76e8), color-stop(50%, #7038e0), color-stop(50%, #6021de), color-stop(100%, #6224de));
  background-image: -webkit-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  background-image: -moz-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  background-image: -ms-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  background-image: -o-linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  background-image: linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
  line-height: 1;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0px -1px 1px #473569;
  width: 150px;
  -webkit-background-clip: padding-box; 
  }
  button.purple-candy:hover {
    background-color: #8d69cf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8d69cf), color-stop(50%, #6332c7), color-stop(50%, #551dc4), color-stop(100%, #561fc4));
    background-image: -webkit-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -moz-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -ms-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: -o-linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    background-image: linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
    -webkit-background-clip: padding-box;
    cursor: pointer; 
    }
  button.purple-candy:active {
    background: #4a1aab;
    background: -moz-radial-gradient(50% 31% 0deg, circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)), -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
    background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
    color: #ddd;
    -webkit-background-clip: padding-box; 
    }


</style>
</head>
<body>

<div class="container">

<button class="purple-candy">Test Button</button>
    
</div>

</body>
</html>

Open in new window


I need this button to work on the different Internet Explorer browsers from IE 8 through IE 11.

When I test this page this is what the button looks like on the 4 different versions of IE.

my button on Internet Explorer Browser
My button style works correctly on IE 10 and IE 11.
My button doesn't look correct on IE 8 and IE 9.

Anyone know how I fix my button so it looks correct on IE 8 and IE 9?

For easy reference here is my fiddle:

http://jsfiddle.net/t65uU
0
maqskywalker
Asked:
maqskywalker
1 Solution
 
COBOLdinosaurCommented:
IE prior to IE does nor support gradients natively.  You have to use non-standard htc hacks:

http://css3pie.com/

Those are not recommended by most professionals and are really there for novice developers who have still not figured out that all browsers were never intended to look the same.

Cd&
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
If you want the gradient to appear the same way everywhere use an image with that gradient.
A one pixel wide and with the same height as the button repeated horizontally.

Another trick is to use a transparent png that applies that gradient to all the colors you set as the background.
Basically you create a gray based gradient image with a transparent background and apply a certain amount of transparency to the whole image.

You can do all this with Paint.Net for instance.
Here's a gradient example:
http://www.getpaint.net/doc/latest/GradientTool.html
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now