CODEWITHSUNDEEP
cssforms
JVG
JVG

Reputation: 21180

Using CSS to rotate an input's value 90 degrees

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?

Upvotes: 3

Views: 16893

Answers (2)

Abudayah
Abudayah

Reputation: 3875

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>

Upvotes: 7

Kannika
Kannika

Reputation: 2558

I think this is what u need :

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

Upvotes: 1

Related Questions