Question

I have a submit button whose text needs to be rotated. However, I can only seem to work out how to rotate the entire submit button rather than just the VALUE.

The CSS I’m using to rotate is simply:

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

and the whole CSS for the submit button is:

.form input[value="SUBMIT"] {
    height:1.5em;
    width:7em;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    font-size:1.5em;
}

As you can guess, this applies to the entire submit button, so the whole thing is rotated (hence why I’ve swapped the height/width attributes to make it a thin vertical bar, see image below).

The Problem is that this makes the button position really weirdly, and I can’t get it to the desired position in the div (which is directly to the right of the textarea). There is more than ample room, however adding margin-top:-XYZem only pushes the button up a little bit, and then stops.

Here’s a live version so you get the idea

The button is very easy to position when I haven’t done the rotation; is it possible to rotate ONLY the text value that sits on the button, and not the entire button itself?

Answer 1

put input in div and customize your style

.button{
/* write your style here*/
    background-color: #12E9F0;
    border: medium none;
    margin-right: 0;
    padding: 0.2em 0.6em;
}
.button input[type="submit"]{
    height:1.5em;
    width:7em;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    font-size:1.5em;
    border:0 none;
    background:none;
}

<div class="button">
    <input type="submit" value="submit" />
</div>