how to put image on button? (css) - html

Question

I have problem with my css code, I'm trying to put an image in a button, but the image goes down and not in the rigth side as I want.
What I need is that my image calendar to be in the same level as the text, I need this to be done in only one div, I know how to do it with two separate divs, but this is not the case, pelase help.
here is my code:
#import url("http://fonts.googleapis.com/css?family=Maven+Pro");
.date_Button {
height: 48px;
width: 150px;
font: bold 16px/48px arial;
margin: 20px 20px 20px 20px;
position: relative;
}
/* ===============================
========= GREY STYLE ==========
===============================
================================================== */
.grey-button-date:first-child {
/* styling for the left part */
padding-top: 10px;
width: 100px;
height:40px;
text-align: center;
/* border radius */
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
/* backgorund */
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#c6c6c6));
background: -moz-linear-gradient(#fbfbfb, #c6c6c6);
background-color: #ccc;
/* shadows and highlights */
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}
.date_Button:hover .grey-button-date:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
background-color: #ddd;
}
.date_Button:active .grey-button-date:first-child {
background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
background: -moz-linear-gradient(#d5d5d5, #fafafa);
background-color: #fbfbfb;
}
.date_Button:hover .grey-button-date {
background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#d5d5d5));
background: -moz-linear-gradient(#fdfdfd, #d5d5d5);
background-color: #ddd;
}
.date_Button:active .grey-button-date {
background: -webkit-gradient(linear, left top, left bottom, from(#d5d5d5), to(#fafafa));
background: -moz-linear-gradient(#d5d5d5, #fafafa);
background-color: #fbfbfb;
}
.grey-button-date a {
/* link styling */
color: #333;
font: bold 16px/32px arial, helvetica, sans-serif;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
<h3>Date</h3>
<div class="date_Button">
<div class="grey-button-date">
09/02/15<img width="50px" src="calendar-03.svg">
</div>
</div>

Answer 1

You've defined a width and height for your grey-button-date. The image can't fit inside. Try removing your height:
.grey-button-date:first-child {
/* styling for the left part */
padding-top: 10px;
width: 100px;
text-align: center;
See this JSFiddle.
You also might want to look into putting the entire grey-button-date inside your <a> tag.