Button rotated

HTML

<div onclick="window.location='www.google.com'">
  <div>
    <div class="salir">Hola, Juan</div>
  </div>
</div>

CSS

.salir {
    border-top: 0px;
    border-bottom: 0px;
    border-right: 3px #0385c3 solid;
    border-left: 3px #0385c3 solid;
    cursor: pointer;
    display: block;
    background: rgba(58, 121, 153, 0);
    color: #2d2d2d;
    margin-bottom: auto;
    margin-top: 35px;
    margin-right: 10px;
    font-size: 18px;
    width: 160px;
    float: right;
    transition: all 1s ease;
    transform-style: preserve-3d;
    text-align:center;
}
 
.salir:hover {
	transform-origin: center bottom;
	transform: rotateX(-90deg) translateY(100%);
}
.salir:before {
	top: -120%;
	left: -3px;
	width: 100%;
	position: absolute;
	background: white;
	content: 'Salir';
	transform-origin: left bottom;
	transform: rotateX(90deg);
  font-size: 18px;
  border-right: 3px #0385c3 solid;
  border-left: 3px #0385c3 solid;
  color: white;
  background: rgba(58, 121, 153, 0);
}