BUTTON AREDONDADO

[Jack Oliveira 1]

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~ 87]

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 1]

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 1]

@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~ 87]

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)