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

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