CODEWITHSUNDEEP
htmlcss
Patrick
Patrick

Reputation: 2781

Vertical Button using CSS

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>

Upvotes: 6

Views: 23225

Answers (3)

CMS_95
CMS_95

Reputation: 335

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

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

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;
}

Upvotes: 6

akaBase
akaBase

Reputation: 2250

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

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

jsfiddle

Upvotes: 2

Related Questions