Link to home
Start Free TrialLog in
Avatar of Panos
PanosFlag for Germany

asked on

css3 button - img

Hello experts.
I want to create a css3 button and use inside one png image on the left and inline the text of the button.
Unfortunately i can't center the image and the span (i use a span for the text.)
Any help?
.CSS3BUTTON {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;<wbr ></wbr>
	-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);

	color:rgba(0,0,0,0.9);
	text-shadow:1px 1px 0px rgba(255,255,255,0.8);
	border:1px solid rgba(0,0,0,0.5);
	 -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; 
	background:-webkit-gradien<wbr ></wbr>t(linear,0<wbr ></wbr>% 0%,0% 100%,from(rgba(255,255,255<wbr ></wbr>,1)),to(rg<wbr ></wbr>ba(185,185<wbr ></wbr>,185,1)));<wbr ></wbr>
	background:-moz-linear-gra<wbr ></wbr>dient(top,<wbr ></wbr>rgba(255,2<wbr ></wbr>55,255,1),<wbr ></wbr>rgba(185,1<wbr ></wbr>85,185,1))<wbr ></wbr>;

	padding:5px 5px 5px 5px;
}

.CSS3BUTTON:hover {
	background:rgba(240,240,24<wbr ></wbr>0,1);
}

.CSS3BUTTON:active, .button:focus {
	background:-webkit-gradien<wbr ></wbr>t(linear,0<wbr ></wbr>% 100%,0% 0%,from(rgba(255,255,255,1<wbr ></wbr>)),to(rgba<wbr ></wbr>(185,185,1<wbr ></wbr>85,1)));
	background:-moz-linear-gra<wbr ></wbr>dient(bott<wbr ></wbr>om,rgba(25<wbr ></wbr>5,255,255,<wbr ></wbr>1),rgba(18<wbr ></wbr>5,185,185,<wbr ></wbr>1));
}

.CSS3BUTTON:disabled {
	color:rgba(0,0,0,0.4);
	text-shadow:1px 1px 0px rgba(255,255,255,0.5);
	background:rgba(220,220,22<wbr ></wbr>0,1);
}

<div  class="CSS3BUTTON" style="width:200px;margin-<wbr ></wbr>top:10px; cursor:pointer;"  align="center"><img src="/img/manual_small.png<wbr ></wbr>" border="0" ><span>test <br>test</span></div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Panos

ASKER

Hi kozaiwaniec
You are right .It is working for me too now. I did delete my Browser cache.

Thank you for the interesting link.
I like to keep my css because it is a little more simplier and because i will not support old browsers but it is not working in opera.
can you please take a look?
Avatar of Panos

ASKER

This is the css:
.CSS3BUTTON {
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
      -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
      -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);

      color:rgba(0,0,0,0.9);
      text-shadow:1px 1px 0px rgba(255,255,255,0.8);
      border:1px solid rgba(0,0,0,0.5);
       -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
      background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
      background-image:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));

      padding:5px 5px 5px 5px;
}

.CSS3BUTTON:hover {
      background:rgba(240,240,240,1);
      cursor:pointer;
}

.CSS3BUTTON:active, .button:focus {
      background:-webkit-gradient(linear,0% 100%,0% 0%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
      background:-moz-linear-gradient(bottom,rgba(255,255,255,1),rgba(185,185,185,1));
}

.CSS3BUTTON:disabled {
      color:rgba(0,0,0,0.4);
      text-shadow:1px 1px 0px rgba(255,255,255,0.5);
      background:rgba(220,220,220,1);
}
include the -o- specific properties

-o-linear-gradient... etc..
Avatar of Panos

ASKER

Thank you for your help.
Avatar of Panos

ASKER

Thank you
regards
panos