I'm trying to create a button that sticks to the right sidfe of the screen. I want this button the turn 90" and stick 50% vertically. I can't find alot of help online, maybe you guys can help. See my code below, it currently isn't vertically aligned centred.

I also added a picture of how it looks. Thanks in advance!

My current code:

       HTML
 <button type="button" class="button">
     <span class="button__text">Interaction Designer <br> @ Company</span>
     <span class="button__icon"></span>
 </button>

CSS
.button {
    position: absolute;
    display :flex;
    align-items: center; 
    justify-content: center;
    z-index: 999;
    top: 50%;
    right: 0;
    transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);

Picture 2

CodePudding user response：

body {
    margin: 0;
}

.button {
    position: fixed;
    z-index: 999;
    top: calc(50% - 120px);
    left: unset;
    right: -51px;
    -webkit-transform: rotate(-90deg) translate(-50%, 0%);
    -moz-transform: rotate(-90deg) translate(-50%, 0%);
    -o-transform: rotate(-90deg) translate(-50%, 0%);
    -ms-transform: rotate(-90deg) translate(-50%, 0%);
    transform: rotate(-90deg) translate(-50%, 0%);
}

 <button type="button" class="button">
     <span class="button__text">Interaction Designer <br> @ Company</span>
     <span class="button__icon"></span>
 </button>


<div style="height:100vh;"></div>
<div style="height:100vh;"></div>