Question

I am trying to add two distinct text styles to a single button with a background image. I’m sure you can read the code clearly below but the main style is used to label the function of the button while the other is used to define the name of a recently upload image.

I’m not totally sure it can be done solely in HTML & CSS but I suppose it’s worth a shot:

I tried using span but that did not work at all:

HTML:

<form><input type="button" class="arrivalbutton" value="From my Drive <span class="arrivalbutton">Top of Stelvio Pass.jpg</span>" /> </form>

CSS:

.arrivalbutton {
width:494px;
height:31px;
border:1px solid #ccc;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
margin-bottom:10px;
font-family: Helvetica, sans-serif;
font-weight:bold;
font-size: 14px;
padding: 2px 0 0 8px;
text-align: left;
color: #f32114;
background:url(../images/buttonbackground.png);
    transition:background .25s ease-in-out;
    -moz-transition:background .25s ease-in-out;
    -webkit-transition:background .25s ease-in-out;
}
.arrivalbutton span {
font-family: Helvetica, sans-serif;
font-weight:normal;
font-size:14px;
float:left;
margin-left:10px;
}

Any ideas?

Answer 1

you can not add span to the button value all will behave like string or value

the for that you can use the the <button> tag:

<button type="button" class="arrivalbutton">From my Drive <span class="arrivalbutton">Top of Stelvio Pass.jpg</span></button>