Vertical Button using CSS

Question

I'm trying to build a vertical button but I not able to put the text in only one line.

enter image description here

Until now I have:

Any idea how can I push down the text and put it in only one line?

#hp-ctn-howItWorks
{
    position:fixed;
    top:50px;
    right: 0px;
    padding:0px;
    margin:0px;
    width: 40px;
    height:160px;
    background:#FF931E;
    z-index:15;
    border-radius: 3px 0px 0px 3px;
}

#hp-ctn-howItWorks img
{
    margin: 15px 0px 0px 13px;
}

#hp-ctn-howItWorks p
{
    color: #fff;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
}

<div id="hp-ctn-howItWorks">
    <img src="~/Content/images/ui-symb-arrow-left-white-15x15.png" width="15" height="15" />
    <p>Como funciona</p>
</div>

Don't transform the `p` tage, transform the div. See here - http://stackoverflow.com/questions/26390001/vertical-direction-text-writing-mode-lr-bt-position-changes-with-text-lengt/26390239#26390239 — Paulie_D, Oct 27 '14 at 17:27
actually the P element is the problem because its size is not defined meaning it sets its size to the default which in this case is causing it to display with split text because the width is too short. — CMS_95, Oct 27 '14 at 17:50

score 6 · Answer 1 · answered Oct 27 '14 at 17:44

demo - http://jsfiddle.net/victor_007/m1c5xazr/1/

rotate the buttom instead of text

#hp-ctn-howItWorks img {
    vertical-align:middle;
}
#hp-ctn-howItWorks {
    padding:0px 0px 0px 0px;
    text-align: center;
    margin:0px;
    width: 160px;
    height:40px;
    background:#FF931E;
    z-index:15;
    border-radius: 5px 5px 0px 0px;
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform-origin: bottom right;
    position: fixed;
    right: 0px;
}
#hp-ctn-howItWorks p {
    color:#fff;
    display:inline-block;
    line-height:40px;
}

score 2 · Accepted Answer · answered Oct 27 '14 at 17:31

2

You can do this by using the html non breaking space   here <p>Como funciona</p>

this is how it looks after changing it and the margin on the image

jsfiddle

answered Oct 27 '14 at 17:31

akaBase

2,178
1
18
31

score 0 · Answer 3 · answered Oct 27 '14 at 17:46

by adding some More CSS it should work for instance:

HTML

<p class="c">TEXT</p>

CSS

.c{width:100%;height:100%;position:relative;Top:30px;left:20px}

by adjusting the dimensions of the

element you gain more control over how it looks also note that using:

position:relative;

allows the height and width to fit only within the parent DIV

hope this helps

Vertical Button using CSS

3 Answers3