BUTTON AREDONDADO

Jack Oliveira · Junho 2, 2018

Ola pessoal boa tarde..

poderiam me dizer como eu posso fazer com que este meu codigo aqui ele fica aredondado quando for aberto no celular..

Este é o stylo dele

<style>

.bt {

border:1px solid #25692A;

border-radius:4px;

display:inline-block;

cursor:pointer;

font-family:Verdana;

font-weight:bold;

font-size:13px;

padding:6px 10px;

text-decoration:none;

}

 <!-- Telefone-->
.bt-telefone {

border-color:#483d8d;

background:linear-gradient(to bottom, #3b5998 5%, #4d70ba 100%);

box-shadow:inset 0px 1px 0px 0px #0000ff;

color:#fff;

text-shadow:0px 1px 0px #fff;


margin-left: 3px;

padding:8px;

}

.bt-telefone:hover {

background:linear-gradient(to bottom, #483d8d 5%, #0000ff 100%);

}

<!-- Celular-->
 
.bt-celular {

border-color:#483d8d;

background:linear-gradient(to bottom, #3b5998 5%, #4d70ba 100%);

box-shadow:inset 0px 1px 0px 0px #0000ff;

color:#fff;

text-shadow:0px 1px 0px #fff;
  
margin-left: 6px;

padding:8px;

}

.bt-celular:hover {

background:linear-gradient(to bottom, #483d8d 5%, #0000ff 100%);

}


 <!-- Facebook-->
.bt-facebook {

border-color:#483d8d;

background:linear-gradient(to bottom, #3b5998 5%, #4d70ba 100%);

box-shadow:inset 0px 1px 0px 0px #0000ff;

color:#fff;

text-shadow:0px 1px 0px #fff;

margin:8px;

padding:8px;

}

.bt-facebook:hover {

background:linear-gradient(to bottom, #483d8d 5%, #0000ff 100%);

}

 
 <!-- Instagram-->
.bt-instagram {

border-color:#483d8d;

background:linear-gradient(to bottom, #3b5998 5%, #4d70ba 100%);

box-shadow:inset 0px 1px 0px 0px #0000ff;

color:#fff;

text-shadow:0px 1px 0px #fff;

}

.bt-instagram:hover {

background:linear-gradient(to bottom, #483d8d 5%, #0000ff 100%);

}


<!-- WhatsApp--> 
.bt-whatsapp {

border-color:#483d8d;

background:linear-gradient(to bottom, #3b5998 5%, #4d70ba 100%);

box-shadow:inset 0px 1px 0px 0px #0000ff;

color:#fff;

text-shadow:0px 1px 0px #fff;

}

.bt-whatsapp:hover {

background:linear-gradient(to bottom, #483d8d 5%, #0000ff 100%);

}


<!-- mapa--> 
.bt-mapa {

border-color:#483d8d;

background:linear-gradient(to bottom, #3b5998 5%, #4d70ba 100%);

box-shadow:inset 0px 1px 0px 0px #0000ff;

color:#fff;

text-shadow:0px 1px 0px #fff;

}

.bt-mapa:hover {

background:linear-gradient(to bottom, #483d8d 5%, #0000ff 100%);

}


<!-- site--> 
.bt-site {

border-color:#483d8d;

background:linear-gradient(to bottom, #3b5998 5%, #4d70ba 100%);

box-shadow:inset 0px 1px 0px 0px #0000ff;

color:#fff;

text-shadow:0px 1px 0px #fff;

}

.bt-site:hover {

background:linear-gradient(to bottom, #483d8d 5%, #0000ff 100%);

}

 
 <!-- app-->
.bt-app {

border-color:#483d8d;

background:linear-gradient(to bottom, #3b5998 5%, #4d70ba 100%);

box-shadow:inset 0px 1px 0px 0px #0000ff;

color:#fff;

text-shadow:0px 1px 0px #fff;

padding: 2px

}

.bt-app:hover {

background:linear-gradient(to bottom, #483d8d 5%, #0000ff 100%);

}



.bt:active {

position:relative;

top:2px;}

</style>

para da o espaço fiz assim de dois modo

margin-left: 6px;

margin: 6px;

so que não separou eles

Este é o codigo html

<li class="list-inline-item py-2 mr-0"><a button class="bt bt-telefone"  href="" target="_blank" ><i class="fa fa-phone"></i> Telefone</button></a></li>

<li class="list-inline-item py-2 mr-0"><a class="bt bt-celular" href="#" target="_blank"><i class="fa fa-mobile"></i> Celular</a></li>

<li class="list-inline-item py-2 mr-0"><a class="bt bt-facebook" href="#" target="_blank"><i class="fa fa-facebook"></i> Facebook</a></li>

<li class="list-inline-item py-2 mr-0"><a class="bt bt-instagram" href="#" target="_blank"><i class="fa fa-instagram"></i> Instagram</a></li>

<li class="list-inline-item py-2 mr-0"><a class="bt bt-whatsapp" href="#" target="_blank"><i class="fa fa-whatsapp"></i> WhatsApp</a></li>

<li class="list-inline-item py-2 mr-0"><a class="bt bt-mapa" href="#" target="_blank"><i class="fa fa-map-marker"></i> Como chegar</a></li>

<li class="list-inline-item py-2 mr-0"><a class="bt bt-site" href="#" target="_blank"><i class="fa fa-globe"></i> Web Site</a></li>

<li class="list-inline-item py-2 mr-0"><a class="bt bt-app" href="#" target="_blank"><i class="fa fa-play"></i> App</a></li>

E quero dar espaço entre eles mas não consegui fazer ele fica ementado um no outro

Desde já agradeço

Omar~ · Junho 2, 2018

Não entendi, seria isso?

<style>
button {
  border: 0
}
.redondo {
  background: red;
  /* Altura e largura iguais vão fazer o botão ficar como um circulo
     caso contrário ficará oval */
  width: 200px; height: 200px;
  /* Aplica o efeito circular */
  border-radius: 50%
}
</style>
<button class="redondo"></button>

Sobre o espaço entre eles acredito que terá que manipular isso:

li.list-inline-item {
    margin: 0 10px /* Margem de 10 pixels para esquerda e direita */
}

Jack Oliveira · Junho 2, 2018

1 hora atrás, Omar~ disse:

Não entendi, seria isso?


<style>
button {
  border: 0
}
.redondo {
  background: red;
  /* Altura e largura iguais vão fazer o botão ficar como um circulo
     caso contrário ficará oval */
  width: 200px; height: 200px;
  /* Aplica o efeito circular */
  border-radius: 50%
}
</style>
<button class="redondo"></button>

Sobre o espaço entre eles acredito que terá que manipular isso:


li.list-inline-item {
    margin: 0 10px /* Margem de 10 pixels para esquerda e direita */
}

tipo no computador ele fica de cumprindo normal ate ai

so quando abre ele no celular quero que ele fique redondo entende?

Jack Oliveira · Junho 2, 2018

@Omar~ Ola mano eu fiz este do espaço ai e ficou um debaixo do outro ele tem que ficar do lado eu fiz assim e mesmo assim nao deu

li.list-inline-item {

    margin-left: 0 2px /* Margem de 10 pixels para esquerda e direita */
}

Omar~ · Junho 4, 2018

Em 02/06/2018 at 17:28, TUAN disse:
@Omar~ Ola mano eu fiz este do espaço ai e ficou um debaixo do outro ele tem que ficar do lado eu fiz assim e mesmo assim nao deu
li.list-inline-item {
    margin-left: 0 2px /* Margem de 10 pixels para esquerda e direita */
}

Então elementos em linhas você pode optar por exibi-los como "inline-block (bloco de elemento em linha)" "inline-table (blocos de elementos de tabela)" Em ambos os casos sua funcionalidade depende do elemento pai.

Um pouco sobre esses termos você pode encontrar explicação aqui: http://www.maujor.com/tutorial/anti-heroi-css-display-table.php

Outro método seria optar por flutuantes "float" (recomendo esse método). Aplicando as regras á esquerda.

li.list-inline-item {
  float: left;
  margin: 0 2px
}

Pode haver discordância pois o elemento em sí recebe outras regras CSS.

Entretanto no seu caso abrangemos o responsivo. Qualquer elemento em linha seja inline seja float. Vão respeitar a box pai, se a mesma não possui disponibilidade a quebra será inevitável para não estourar a box pai, mas os elementos ainda estão em linha. Acontece que o navegador exibe-os em relação a sua definição com a box pai.

Para evitar a quebra que estoura a box podemos optar por:

overflow (criando uma barra de rolagem da div que terá os elementos em linha. E acredito eu que não seja seu objetivo)
"Espremer" os elementos diminuindo seu tamanho somando a suas margens para caber no media
Redesenhando os elementos para a nova resolução

Por fim vamos entender os paramentros do margin

margin: A B C D

A: margem ao topo (seria o mesmo que margin-top)
B: margem á direita (seria o mesmo que margin-right)
C: margem abaixo (seria o mesmo que margin-bottom)
D: margem a esquerda (seria o mesmo que margin-left)

Quando não especificado terceiro ou quarto parâmetro do valor da propriedade assume-se o valor top&bottom left&rigth

Então se passar ~~margin-left: 0 2px~~ (erro o navegador não vai interpretar porque isso não existe no CSS)

Entrar

Arquivado

BUTTON AREDONDADO

Pergunta

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

4 respostas a esta questão

Recommended Posts

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jack Oliveira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante