How to make Gmail Like Custom Buttons!

Gmail Custom Buttons
Designers/ developers often look for some tools that can help them in handling multiple interactions. We at Candid like to share information about new happenings in the web world. You must have heard about the buttons Google has recently launched on Gmail. These buttons are very similar to basic HTML input buttons, and are capable of handling multiple interactions in one basic design. The application has captured the attention of our experts, who are now using custom button developing techniques for offering better website designing solutions to clients.

Custom Button

  • The very first feature of custom buttons is that everything inside them has been treated as inline element. The left/right borders of buttons are rendered on outer element, while the top/bottom borders are rendered on the inner element.
  • The buttons are created entirely on HTML and CSS. Some JavaScript is also used for managing the behavior of the buttons.
  • You can now change the skin of the buttons with just few lines of CSS, which is definitely going to be a key factor after the introduction of Gmail themes.
  • Affordances are built for changing the color of the border on hover. The gradient direction is reversed for achieving that active/click state that will make it feel like you are pressing the button actually.

Don’t get so fascinated by the trick. You can also develop custom buttons yourself. Douglas Bownman has described how he came up with introducing Google’s custom buttons, that are used in Gmail and other applications. As custom interfaces often provide a good look and better feel, lots of designers are surely going to find these open source buttons really useful.

TO TOP