Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

html css button styling

Posted on 2013-12-05
2
Medium Priority
?
402 Views
Last Modified: 2013-12-06
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
Comment
Question by:maqskywalker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39699459
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
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 2000 total points
ID: 39700322
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question