Avatar of Panos
Panos
Flag 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

CSS

Avatar of undefined
Last Comment
Panos

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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?
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);
}
Kyle Hamilton

include the -o- specific properties

-o-linear-gradient... etc..
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Panos

ASKER
Thank you for your help.
Panos

ASKER
Thank you
regards
panos