Advertisement
  1. Web Design
  2. Material Design Lite

Aprendendo Material Design Lite: Botões

by
Read Time:6 minsLanguages:
This post is part of a series called Learning Material Design Lite.
Learning Material Design Lite: Navigation
Learning Material Design Lite: Text Fields

Portuguese (Português) translation by Claudia Conceicao (you can also view the original English article)

Os botões são uma parte integral de qualquer website funcional (além disso os designers adoram-nos!). Acções de utilizador na web, geralmente, começam e acabam clicando num botão. No Google Mail por exemplo, criamos um novo email clicando no botão Compose. Provavelmente também iremos clicar em mais alguns botões para personalizar o email. E finalmente, clicamos no botão Send para enviar o email. Nesta parte da nossa série Aprendendo Material Design Lite (MDL), iremos olhar para o componente Botões.

O componente Botões no MDL é essencialmente um aperfeiçoamento do <button>, ou um elemento <a> para cumprir com a estética do Material Design. De acordo com a especificação, existem quatro tipos de botão

  • plano
  • aumentado
  • flutuante
  • ícone

Iremos ver como implementar cada um destes e quando cada um funciona melhor.

Como lembrete, garante que tens as folhas de estilo MDL e o JavaScript definidos dentro do head dos teus documentos. Podes personalizar o esquema de cor que vai ser aplicado aos componentes usando o MDL Theme builder.

Assim que estiverem todos definidos, podemos instalar o component Botões - começando pelo tipo plano.

O botão plano

Criar um botão MDL é bastante simples. Podemos criar um botão ou com um elemento button, um elemento input com o tipo submit, ou uma tag âncora.

Adiciona a class mdl-button a estes elementos para aplicar os estilos de botões MDL.

Na demo abaixo, criámos um botão flat com a cor pré-definida para preto.

A cor do texto do botão é personalizável ao incluir uma das seguintes classes modificadoras.

  • mdl-button--colored Adiciona esta class para usar a cor primária no texto do botão.
  • mdl-button--accent Alternativamente, adiciona esta classe para usar a cor de destaque.

Referindo o nome da folha de estilos principal (material.teal-red.min.css), a nossa cor primária é "azul-petróleo", enquanto que "vermelho" será usado como destaque ou segunda cor (insere texto na entrada de email abaixo para ver estas cores produzirem o efeito).

O botão flat é o tipo de botão mais básico no MDL. Irá funcionar melhor numa situação em que uma acção é intuitivamente esperada, como numa caixa popup de diálogo, num componente cartão, ou num formulário de login ou de registo.

Devido à sua aparência, no entanto, usar um botão flat dentro do texto do corpo não é recomendado. O botão flat aparece como texto regular, como podes ver acima. E visto que não apresenta explicitamente características de botão à primeira vista, o botão flat também não transmitiria a affordance que a maioria dos utilizadores iriam reconhecer como sendo um botão clicável.

A flat button in a middle of body textA flat button in a middle of body textA flat button in a middle of body text
Isto é um botão?

Quando o botão flat não parece apropriado, consider usar um botão do tipo raised.

O botão raised.

O botão raised retrata características típicas de um botão; é largo e tem uma sombra para dar o efeito de elevado. Para criar um, começamos com um elemento botão com a classe mdl-button atribuída.

Depois adiciona a class mdl-button--raised ao elemento. Como antes, o botão raised também pode ser personalizado com a adição da class mdl-button--colored ou mdl-button--accent.

Aqui temos botões raised com a cor padrão, primária e a cor de destaque definida como o fundo do botão.

O botão raised é proeminente, o que faz com que seja apropriado quando a atenção do utilizador é a maior prioridade. Podia ser usado, por exemplo, para um botão de call-to-action na secção hero, o botão de submissão num formulário de subscrição, ou um botão "Comprar agora" numa página de um produto.

Nota: tem consciência da hierarquia quando usas um botão raised. Usando um botão levantado numa camada de conteúdo com sombras, como uma caixa de diálogo pop-up, pode tornar o conteúdo excessivamente ocupado com elementos que chamam à atenção.

Botão flutuante de ação (FAB)

O botão flutuante de ação (FAB) foi reconhecido como o elemento assinatura do Material Design. O FAB é um botão circular com um ícon flutuante na página. O objetivo de um FAB é chamar para o botão call-to-action; enfatiza uma acção que os utilizadores - presumivelmente - mais executam. Normalmente é apresentado com uma cor viva que o faz proeminente entre os restantes elementos de IU na página.

Localizar o FAB

Uma vez mais, começamos um botão flutuante de acção com um elemento button vazio com a class mdl-button. Desta vez, em vez de texto, incluímos um ícone no botão. Consulta as directrizes de ícones do Material Design para selecionar o nome do ícone a apresentar. 

Para tornar o botão num FAB, adicionamos a class mdl-button--fab, adicionalmente com mdl-button--colored para modificar a cor do fundo.

Como podes ver abaixo, o botão FAB ganha a cor de destaque quando é definido como um botão colorido, ao contrário da cor primária, como vimos com os botões plano e levantado.

O MDL aplica a cor primária na maior parte dos componentes "coloridos", como a navegação, tabs, campos de texto, sliders, e campos de seleção, o que faz com que seja completamente dominante. O FAB deve ser mais proeminente entre o resto da IU, logo ele apresenta a cor de destaque por defeito.

Em qualquer caso, quando a cor primária for a mais apropriada, podes adicionar a class mdl-button--primary em vez disso.

Aqui está com a cor primária:

Botão ícone

Ao contrário do FAB, o ícone não tem a forma circular; aparece somente como um ícone. Um botão ícone é prático quando o espaço é limitado, ou é suficiente para representar o objetivo do botão dado que os utilizadores estão habituados à aplicação. Toma como exemplo a barra de ferramentas do Google Docs:

Usando um botão textual para uma barra de ferramentas neste caso seria imaginável.

O botão ícone é formado através da combinação das classes mdl-button e mdl-button--icon:

Este exemplo mostra um ícone que representa a funcionalidade de transferência de dados ou cópia de segurança.

O efeito onda do botão

Além disso, estes botões podem ser melhorados com o efeito onda. O efeito onda é outra assinatura visual do Material Design e fornece feedback visual quando o botão é clicado. O efeito começa na coordenada onde o clique é feito, replicando a forma como o efeito ocorre na vida real.

Esta melhoria advém de duas classes: mdl-js-button e mdl-js-ripple-effect que podem ser adicionadas a qualquer tipo de botão MDL.

Adiciona estas duas classes ao botão:

e o efeito onda deverá ser agora aplicado:

Botões inativos

Em alguns casos, como quando um campo de texto obrigatório está vazio, ou uma opção particular ainda não foi selecionada, é melhor que o botão accionável esteja desativado. Para desativar botões MDL, adiciona o atributo boleano HTML disabled ao elemento botão:

O botão deve ser agora não responsive para a interação do utilizador (o efeito onda também será desativado). Adicionando as classes modificadoras da cor mdl-button--colored ou mdl-button--accent, também não terá efeito nos botões desativados.

O atributo disabled, embora HTML não válido, também é aplicável a botões criados com a tag âncora.

Envolvendo

Os botões são muito simples de implementar. Podemos construir um botão muito bem decorado, com uma animação suave com um efeito de ondulação, com apenas algumas classes. Pessoalmente, espero que o componente seja melhorado ainda mais, através da inspiração do componente botão Bootstrap, talvez incluíndo a variante de grupos de botão.

Na próxima parte desta série, vamos olhar para o component campos de texto, com o qual já nos deparámos algumas vezes até agora.

Até à próxima.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.