CODEWITHSUNDEEP
htmlbutton
Muleskinner
Muleskinner

Reputation: 14468

Styling part of a (submit) button-label

I have a submit button which is simply marked up as this:

<input type='submit' name='foo' value='Continue ⇢' class='button' />

enter image description here

I would like to make the rightward dotted arrow a tad larger. 

<input type='submit' name='foo' value='Continue <span class='makemeatadlarger'>⇢</span>' class='button' />

is obviously not working... Is there a simple way to do this (I am not interested in adding tons of outher divs/spans and preferable without having to use images)

UPDATE Inspired by accepted answer below I came up with this:

html

<button type='submit' name='foo' value='Continue' class='button'>Continue</button>

css

.button:after  {
    content: ' ⇢';
    font-size: 220%;
    height: 26px;
    margin-top: -19px;  
    float: right;
}

example

enter image description here

And heres a live example over at jsfiddle

Upvotes: 4

Views: 3239

Answers (2)

ayyp
ayyp

Reputation: 6598

I don't believe so because taking the span out takes it out of the button. The best way would be a button instead of an input like so: <button type="submit" name="foo" class="button">Continue <span class='makemeatadlarger'>⇢</span></button>

Upvotes: 1

Matt K
Matt K

Reputation: 6709

You must style the button text as a whole, not just a portion. To achieve your desired effect wouldn't it be much easier to create an image?

Upvotes: 0

Related Questions