Colocar botão flutuante no lado direito.

Olá!

Teste assim:

#BtnWrapper {
 position: fixed; /* Posicionamento absoluto da div na viewport */
 right: 15px; /* Coloca à direita, e então dá 15px de margem */
 width: 70px; /* Não precisamos de um Wrapper maior do que 70px */
 height: 100%; /* Altura total para centralizarmos verticalmente */
 display: flex; /* Ativamos o display flex para alinhamento */
 align-items: center; /* Centro na vertical */
 justify-content: right; /* Direita na horizontal */
}

#Btn {
 border-radius: 10%; /* Arredondamos as bordas */
 transform: rotate(90deg); /* Rotacionamos 90 graus */
 height: 2rem; /* Altura */
 border: 2px solid #999; /* Borda */
 background: #ccc; /* Bg */
}

<div id="BtnWrapper">
 <button id="Btn">Suporte</button>
</div>

>

1 hora atrás, Matheus Tavares disse:

Olá!

Teste assim:

#BtnWrapper {
 position: fixed; /* Posicionamento absoluto da div na viewport */
 right: 15px; /* Coloca à direita, e então dá 15px de margem */
 width: 70px; /* Não precisamos de um Wrapper maior do que 70px */
 height: 100%; /* Altura total para centralizarmos verticalmente */
 display: flex; /* Ativamos o display flex para alinhamento */
 align-items: center; /* Centro na vertical */
 justify-content: right; /* Direita na horizontal */
}

#Btn {
 border-radius: 10%; /* Arredondamos as bordas */
 transform: rotate(90deg); /* Rotacionamos 90 graus */
 height: 2rem; /* Altura */
 border: 2px solid #999; /* Borda */
 background: #ccc; /* Bg */
}

<div id="BtnWrapper">
 <button id="Btn">Suporte</button>
</div>

  

	 

	Perfeito parceiro. Funcionou direitinho, muito obrigado pela apoio.

	Abração.