 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
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: 901 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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">
function testar(){
window.alert("Fui clicado.");
}
</script>
</head>
<body>
<button onclick="testar()" id="botao">
Clique Aqui</button>
</body>
</html>
|
 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 |
