CSS - How to remove lines around the button?

Asked

Viewed 4,327 times

0

Good morning guys, I’m having a question to remove the edge by clicking the button..

If anyone knows and can help I’d appreciate it :)

inserir a descrição da imagem aqui

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>
css classes button hover

2 answers

1


Just take the Outline out of the class .buttun thus:

.button:focus, button:active {
    outline: none;
}

But you shouldn’t do that, even for the sake of Accessibility... http://www.outlinenone.com/

@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;
    }
    .button:focus, button:active {
    outline: none;
    }

.esp {
    margin-left:300px;
}

.esp2 {
    margin-left:300px;
}

.esp3 {
    margin-left:600px;
}

.esp4 {
    margin-left:600px;
}
<!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" />

<style>


</style>
</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>

  • Thank you very much! It worked right :)

0

hi, add the following property to your button’s CSS:

button{
   outline:none;
}

Browser other questions tagged css classes button hover

You are not signed in. Login or sign up in order to post.