 |
|
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: 621 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: |
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Como definir uma imagem de fundo para um botão HTML usando a propriedade background-image do CSSQuantidade de visualizações: 9491 vezes |
Nesta dica mostrarei como podemos usar a propriedade background-image do CSS para aplicar uma imagem de fundo a elemento <button> do HTML. Vamos ver duas abordagens. Na primeira abordagem usaremos CSS inline. Veja:----------------------------------------------------------------------
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>
</head>
<body>
<button style="background-image: url('fundo.jpg')">
Clique aqui</button>
</body>
</html>
Agora veja a mesma técnica usando um bloco CSS na seção <head> da página HTML e definindo um id para o botão: ----------------------------------------------------------------------
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{
background-image: url('fundo.jpg');
}
</style>
</head>
<body>
<button id="botao">Clique aqui</button>
</body>
</html>
|
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Exemplos de uso da propriedade background do CSS para definições cores e imagens de fundo em elementos HTMLQuantidade de visualizações: 8949 vezes |
|
Nesta dica mostrarei alguns exemplos muito úteis da propriedade background do CSS para definirmos cores e imagens de fundo para a página HTML e também para os elementos HTML: Exemplo 1: Como definir a cor de fundo para a página HTML usando a propriedade background: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC}
Exemplo 2: Como definir a cor de fundo e a imagem de fundo para a página HTML usando as propriedades background e url: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif)}
Exemplo 3: Como definir a cor de fundo, a imagem de fundo para a página HTML e a forma de repetição usando as propriedade background, url e repeat-x: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif)
repeat-x}
Exemplo 4: Como definir a cor de fundo, a imagem de fundo para a página HTML, a forma de repetição e como fixar a imagem de fundo usando as propriedade background, url, repeat-x e fixed: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif) repeat-x
fixed}
Exemplo 5: Como definir a cor de fundo, a imagem de fundo para a página HTML, sem repetição, fixa e posições inicias usando as propriedade background, url, repeat-x e fixed: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
body {background: #0099CC url(fundo.gif) no-repeat
fixed 40 60}
|
CSS ::: Dicas & Truques ::: Cores de Fundo e Imagens de Fundo |
Como definir uma imagem de fundo que se repete apenas verticalmente usando a propriedade background-repeat do CSSQuantidade de visualizações: 7460 vezes |
|
Nesta dica mostrarei como podemos definir uma imagem de fundo para a página HTML e ajustá-la para repetir apenas verticalmente usando a propriedade background-repeat com o valor repeat-y. Note que, para definir a imagem de fundo, nós usamos a propriedade background-image. Veja o código CSS para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<style type="text/css">
<!--
body {background-image: url('fundo.gif');
background-repeat: repeat-y}
//-->
</style>
|
Veja mais Dicas e truques de CSS |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
