Good morning, I have a question to remove the border when clicking on the button ..
If somebody knows and can help I thank:)
CSS:
@charset"utf-8";
/* CSS Document */
body {
font-size:16px;
color:#000;
}
.imagem_1 {
position:absolute;
top: 180px;
left: 50px;
}
.imagem_2 {
position:absolute;
top: 180px;
left: 350px;
}
.imagem_3 {
position:absolute;
top: 180px;
left: 650px;
}
ul {
list-style-type:none;
padding:0;
margin:0;
overflow: hidden;
}
ul li {
display:inline
}
li a {
display:inline-block;
padding:25px 70px;
text-decoration: none;
color:#000;
}
li a:hover{
color:#fff;
background-color:#FC1F56;
}
li {
float:left;
}
.active {
color:#FFF;
}
#textura {
position: absolute;
width: 100%;
height: 100%;
margin:auto;
z-index:1;
left:center;
background-repeat:repeat-x;
}
.principal_home {
left: 225px;
position:absolute;
width:940px;
height: 100%;
background-color:#fff;
z-index:1;
}
.top {
position: absolute;
left: center;
width:940px ;
height:70px ;
background-color: #fff;
z-index: 2;
}
.logo{
position: absolute;
left:12px;
z-index:2;
}
.menu_home {
position: absolute;
left: 100px;
top: 1px;
z-index:2;
}
#adc {
position:absolute;
top: 500px;
left: 120px;
background-color:#0C0;
border: 0px;
border-radius:16px;
}
#cmp {
position: absolute;
top: 500px;
left: 220px;
background-color: #0C0;
border: 0px;
border-radius: 16px;
}
.button:hover {
box-shadow: 0 1px 16px;
border:none;
}
.esp {
margin-left:300px;
}
.esp2 {
margin-left:300px;
}
.esp3 {
margin-left:600px;
}
.esp4 {
margin-left:600px;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foxy Clothing</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Background -->
<img id=textura src="imagens/textura_dofundo.jpg" />
<!-- Fim BG -->
<!-- Div Principal -->
<div class=principal_home>
<!-- Imagens -->
<div>
<img class= imagem_1 src="imagens/camiseta1.png" />
<img class= imagem_2 src="imagens/camiseta2.png" />
<img class="imagem_3" src="imagens/camiseta3.png" />
</div>
<!-- Fim Imagens -->
<!-- Botoes -->
<div>
<button id=adc class="button">Adicionar</button>
<button id=cmp class="button" >Comprar</button>
<button id=adc class="esp button">Adicionar</button>
<button id=cmp class="esp2 button">Comprar</button>
<button id=adc class="esp3 button">Adicionar</button>
<button id=cmp class="esp4 button">Comprar</button>
</div>
<!-- Fim Botoes -->
<!-- Topo -->
<div class="top">
<img src="imagens/menu2.jpg">
</div>
<!-- Fim Topo -->
<!-- Logo -->
<div class="logo">
<img src="imagens/logo_1.png"/>
</div>
<!-- Fim Logo -->
<!-- Menu Home -->
<div class="menu_home">
<ul>
<li><a class=active href="home.html">Home</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="novidades.html">Novidades</a></li>
<li><a href="faleconosco.html">Fale Conosco</a></li>
</ul>
</div>
<!-- Fim Menu Home -->
</div>
<!-- Fim Div Principal -->
</body>
</html>