Peter Moss
Peter Moss

Reputation: 29

CSS / AngularJS, text direction on an AngularJS Material button

I have a angularjs material button which I would like the text direction to be vertical on its side however no matter what I try it doesn't work.

writing-mode:vertical-lr; text-orientation:sideways-left;

Can someone point me in the right direction please?

Upvotes: 1

Views: 407

Answers (1)

camden_kid
camden_kid

Reputation: 12813

Here you go - CodePen

enter image description here

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill>
   <md-button id="myVerticalButton" class="md-raised md-primary">My Vertical Button</md-button>
</div>

CSS

#myVerticalButton {
  width: 50px;
  min-width: 50px;
}

#myVerticalButton span {
  writing-mode: tb-rl;
  margin: 20px 0 5px;
  word-spacing: 5px;
}

Upvotes: 1

Related Questions