?
Solved

html css button styling

Posted on 2013-11-08
1
Medium Priority
?
432 Views
Last Modified: 2013-11-08
Hi experts,

I have a page with a button styled with CSS.
The button has a color gradient background.

My button looks like this :

my button with a color gradient background
The hover works as shown on this video:  http://youtu.be/C7OhBtivkEI

Here is the code for this page:  TestButton1.html
<!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>Button with a gradient background color</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; }


/* for the input button */

input.button_style1 {
  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; 
}
input.button_style1: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; 
}
input.button_style1: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>

<br /><br /><br /><br />

<input id="Button1" type="button" value="Home" class="button_style1" />

</body>
</html>

Open in new window



So now what I want is to create another button just like the button above but I want to put a picture of a house right next to the word home on my button.

So this is my code for what I have so far for my second button: TestButton2.html

My TestButton2 looks like this:

my button with image with solid color background
<!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>Button with image in it with solid background color</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; }


/* style for input button 1 */

input.button_style {

/* 16px x 16px */
  background-image: url(http://farm6.staticflickr.com/5474/10747643144_7d0212e057_o.png); 
  /*background-color: transparent;  make the button transparent */
  background-color: #9e76e8;
  background-repeat: no-repeat;  /* make the background image appear only once */
  background-position: 20px 6px;  /* equivalent to 'top left' */
  /*
  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%);
  */
  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 12px "helvetica neue", helvetica, arial, sans-serif;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #000f4d;
  width: 120px; 
}
input.button_style:hover 
{
    background-image: url(http://farm6.staticflickr.com/5474/10747643144_7d0212e057_o.png); /* 16px x 16px */
    background-color: #8d69cf;
    /*
    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; 
	*/
    cursor: pointer; 
}
input.button_style: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>
<input id="Button1" type="button" value="Home" class="button_style" />
    
</body>
</html>

Open in new window


When I run my page, my button looks like this:  http://youtu.be/Nz_8YBTAtQ4

I was able to place the house image on my button but I can't get the purple gradient background color to work on my button. It shoul
I just have a solid purple background color.

My button on this page TestButton2.html should look just like the one on TestButton1.html
except with the house on it.

Anyone know how I fix the background color gradient on TestButton2.html?

So my button should look like this:

my desired css styled button
0
Comment
Question by:maqskywalker
1 Comment
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39634807
I'm sure you can work out the rest of the css based on this

background: url(http://farm6.staticflickr.com/5474/10747643144_7d0212e057_o.png)
no-repeat
10px center,
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #9e76e8), color-stop(50%, #7038e0), color-stop(50%, #6021de) no-repeat, color-stop(100%, #6224de));
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

850 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