Geek Answers Handbook

Styling the part (sending) of the tag button

I have a submit button that is simply tagged like this:

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

enter image description here

I would like the right arrow to point the arrow a little more.

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

obviously doesn't work ... Is there an easy way to do this (I'm not interested in adding tons of div div / spans and preferably without using images)

UPDATE Inspired by the accepted answer below, I came up with the following:

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 in jsfiddle

+4
source share
2 answers

I do not believe it, because choosing span brings it out of the button. A better way would be button instead of input , for example: <button type="submit" name="foo" class="button">Continue <span class='makemeatadlarger'>⇢</span></button>

+1
source

You should style the text of the button as a whole, and not just the part. To achieve the desired effect, would it be much easier to create an image?

0
source

More articles:


All Articles