Sep.05

Borda dupla com CSS

Falai pessoal. Hoje vamos fazer uma borda dupla usando somente CSS.

Você vai precisar criar um link dentro de um elemento que pode ser uma Div, nesse caso a classe da Div é “testeBordaDupla”:

<div class="testeBordaDupla"><a href="#">Sou um link com borda dupla.</a></div>

Depois de criar o Html, você vai atribuir ao link dentro da Div algumas propriedades: Cor de fundo, Espaçamento interno de 10px, Borda de 5px e Display Block.

.testeBordaDupla a{
background:#fff;
padding: 10px;
border: 5px solid green;
margin: 0px;
display: block;
}

Feito isso, crie os estilos da Div que contém o link, coloque uma Borda de 5px, defina a largura máxima, a altura minima e para que ela fique centralizada (se você quiser) deixe a margem como ‘0 auto’.

.testeBordaDupla{
border: 5px solid red;
max-width: 250px;
min-height: 40px;
margin: 0 auto;
}

O código CSS completo fica assim:

.testeBordaDupla a{
background:#fff;
padding: 10px;
border: 5px solid green;
margin: 0px;
display: block;
}
.testeBordaDupla{
border: 5px solid red;
max-width: 250px;
min-height: 40px;
margin: 0 auto;
}

E pronto, ta ai seu botão com borda dupla.

 

Compartilhe isso:
  • facebook
  • twitter
  • gplus

Sobre R.Junior

Deixe um comentário