 |
|
||||
Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS |
Como criar botões achatados em CSS usando as propriedades box-shadow, border e border-radiusQuantidade de visualizações: 679 vezes |
|
Em várias situações nós queremos criar designs mais arrojados para nossas páginas HTML e os botões achatados (flat buttons), ou botões com bordas reduzidas são sempre uma boa opção. Nesta dica mostrarei como podemos combinar algunas propriedades CSS, tais como box-shadow, border e border-radius para criar o efeito do botão flat. Note o uso da propriedade background-color para aplicar a cor de fundo ao botão e também o uso de :hover para trocar a cor de fundo ao passar o mouse sobre o elemento. Para finalizar, coloquei uma função JavaScript atrelada ao click do botão para demonstrar que ele está, de fato, funcionando corretamente. Veja o código HTML e CSS completo para o exemplo:
<!doctype html>
<html>
<head>
<title>Estudos CSS</title>
<style>
#botao:hover{
background-color: #e0e0e0
}
#botao{
margin: 20px;
padding: 10px;
border: 1px solid #e0e0e0;
background-color: #f1f8e9;
box-shadow: none;
border-radius: 0px;
}
</style>
<script type="text/javascript">
|
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
