How to position background image in a button - html

Question

I have the following CSS:
.physButton:before {
content: " ";
display: inline-block;
background: url("../theImages/ste.png") no-repeat;
height: 38px;
line-height: 38px;
vertical-align: middle;
width: 52px;
/*margin-left: 10%;*/
}
.locButton:before {
content: " ";
display: inline-block;
background: url("../theImages/loc.png") no-repeat;
height: 38px;
line-height: 38px;
vertical-align: middle;
width: 52px;
/*margin-left: 10%;*/
}
.mwmButton:before {
content: " ";
display: inline-block;
background: url("../theImages/loc.png") no-repeat;
height: 38px;
line-height: 38px;
vertical-align: middle;
width: 52px;
/*margin-left: 10%;*/
}
button {
border: 1px solid rgba(0,0,0,0.3);
background: #eee;
color: #515151;
font-size: 24px;
font-weight: 700;
padding: 21px 34px;
text-decoration: none;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
padding:0;
border:0;
}
button:hover, a.button:hover {
background: #cbcbcb;
cursor: pointer;
}
button:active, a.button:active {
background: #ccc;
padding: 22px 34px 20px; /* Bump down text */
-moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
text-shadow: none;
}
.locButton {
background: #e1001a;
color: #fff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(192,0,22)), color-stop(0.58, rgb(226,0,26)));
background: -moz-linear-gradient(center bottom, rgb(192,0,22) 21%, rgb(226,0,26) 58%);
text-shadow: 0 1px rgba(0,0,0,0.25);
}
.locButton:hover {
background: #cb0018;
text-shadow: 0 1px rgba(0,0,0,0);
}
.locButton:active {
background: #ae0014;
}
.mwmButton {
background: #E05A00;
color: #fff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(192,63,0)), color-stop(0.58, rgb(224,74,0)));
background: -moz-linear-gradient(center bottom, rgb(192,63,0) 21%, rgb(224,74,0) 58%);
text-shadow: 0 1px rgba(0,0,0,0.25);
}
.mwmButton:hover {
background: #CA7700;
text-shadow: 0 1px rgba(0,0,0,0);
}
.mwmButton:active {
background: #AC6900;
}
which displays the following:
How do I modify the above code the the images aligns to the left and the text aligns to the right as shown here:

Answer 1

HTML:
<div id="mbLOnlyButtons">
<button class="mwmButton" style="width: 95%;"><span class="icon"> </span><span class="text">My WESTMED</span></button>
<div style="clear: both;"><br></div>
<button class="physButton" style="width: 95%;"><span class="icon"> </span><span class="text">Physicians</span></button>
</div>
CSS:
button .text { width: 50%; display: inline-block; text-align:left;}
button .icon { width: 50%; display: inline-block; background: url("http://www.westmedgroup.com/images/HealthCareReformv2.jpg") top right no-repeat; }
This sets up two separate regions within your buttons.

Answer 2

In the bottom picture, the space between image and text are different - just add a bit of padding right on the locButton and physButton :before pseudo elements until they align, you'll need 4-10px.

Answer 3

Place a span around the text and give it a standard width that is big enough for all the buttons (lets say 100px). Now apply this css style:
width:100px;
text-align:right;
the icon will stay on the left (it's default place), and the text will allign