BUTTON AREDONDADO
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çoDiscussão (4)
Carregando comentários...