Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS

Como criar botões achatados em CSS usando as propriedades box-shadow, border e border-radius

Quantidade de visualizações: 733 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:

Este trecho de código ou resolução de exercício faz parte do Super Pack 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos em Java, Python, VisuAlg, Portugol, Delphi, C#, C, C++, VB.NET, Golang, Pascal, Ruby, PHP, e várias outras linguagens.

Aprenda a programar resolvendo problemas do mundo real. Tudo em português, com comentários em português.

Quero Ser Apoiador(a)

Link para compartilhar na Internet ou com seus amigos:

Veja mais Dicas e truques de CSS

Como centralizar uma DIV na vertical e na horizontal usando as propriedades position, top, left e transform do CSS

Como definir a cor de fundo de um elemento usando um valor hexadecimal

Como definir a cor de fundo de um elemento usando nomes de cores

Como criar uma barra de menus na horizontal usando CSS e o valor inline-block para a propriedade display

Como definir a posição inicial de uma imagem de fundo

Apostila CSS - Como definir a cor de fundo de um elemento HTML usando um valor rgb

Como criar uma DIV redonda e alinhar o seu conteúdo ao centro usando as propriedades display, border-radius, justify-content e align-items do CSS

Como criar bordas arredondadas em CSS usando a propriedade border-radius

Como criar uma barra de navegação horizontal com menu dropdown em HTML e CSS - Menu suspenso usando CSS

Como definir uma imagem de fundo para a página HTML em CSS usando a propriedade background-image

Dicas e truques de outras linguagens

Python - Como verificar se uma string contém apenas caracteres alfanuméricos (letras e números) usando a função isalnum() do módulo str da linguagem Python

C# - Como retornar a data e hora da criação de um diretório em C# usando a função GetCreationTime() da classe Directory

C# - Como usar a classe genérica List<T> do C# em suas aplicações

Python - E-Book 650 Dicas, Truques e _Exercícios Resolvidos_ de Python - PDF com 1.200 páginas

MySQL - Como subtrair horas, dias, semanas, meses, anos, etc, do valor de um campo do time DATE ou DATETIME do MySQL usando a função DATE_SUB()

C# - C# Windows Forms - Como criar uma caixa de texto TextBox do tipo senha (password)

C - Como alocar memória dinâmica usando a função calloc() da linguagem C

Java - Como criar um Jogo da Velha em Java - Jogo completo com código fonte comentado - Versão console

PHP - Como resolver uma equação do segundo grau em PHP - Como calcular Bhaskara em PHP

PHP - Como acessar os caracteres de uma string individualmente em PHP usando índices

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas

Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.

Ver Conteúdo do E-book

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas

Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.

Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby

Você está aqui: CSS ::: Dicas & Truques ::: Bordas CSS

Como criar botões achatados em CSS usando as propriedades box-shadow, border e border-radius

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 350 Exercícios Resolvidos de Java - Com comentários em Português

PDF COM 500 PÁGINAS

Apenas R$ 19,90