Solved

html css button styling

Posted on 2013-12-05
2
391 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
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 500 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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now