How to display a vertical button with vertical text in react?
I want to display a button vertically with vertical text like one letter below the another. How can I do it in react?
1 Answer
4 years ago by Divya
A vertical button with vertical text can be created using either css
or js
.
Implementations for both ways are described below
With text rotation.
index.html
<input type="button" value="Rotated text" id="rotate" />
index.css
We can make a button vertical by rotating it by 90deg
#rotate {
vertical-align:top;
transform:rotate(7deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
Without text rotation.
index.html
<div class="button-container">
<button id="vert"></button>
</div>
split the word into letters and join each letter with a <br/>
tag
index.js
var vert = 'vertical'.split("").join("<br/>")
$('#vert').html(vert);
4 years ago by Divya