Google's Imageless Buttons

Creating buttons with HTML and CSS

Structuring with semantic HTML

Use HTML5 button or anchor elements wrapped with span and b tags to represent different button states and styles:

<button class="btn left"><span><b>Previous</b></span></button> <!-- Hey, let's go backwards! -->
<button class="btn center"><span><b>Home</b></span></button>  <!-- Home sweet home -->
<button class="btn right"><span><b>Next</b></span></button>  <!-- Next stop - future! -->


Applying distinct classes like .left, .center, and .right bestows each button with a unique state and visual queue on hovering. You can highlight a primary button using font-weight.

Simplifying internationalization

With imageless buttons, localizing graphics is a thing of the past. This approach simplifies the internationalization process for products with a global reach.

Ensuring accessibility

Use semantically correct HTML to make your buttons accessible to all, regardless of whether Javascript is enabled or not. CSS-styled buttons are also immediately rendered by the browser, enhancing performance.

Upgrading input elements

Use jQuery to convert regular input elements into styled buttons:

$('input[type="submit"]').addClass('btn'); // I just made an Ugly Duckling beautiful!


This keeps your HTML markup clean and brings sophistication the stylish way.

Enhancing design with advanced techniques

Adding gradients using CSS pseudo-elements

Utilizing pseudo-elements like ::before and ::after can enhance button designs by introducing fake gradients. It embeds layers to a flat design:

.btn::before {
    content: '';  // Here's nothing! Literally...
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.5), transparent); // I gradient you! 
}


Drawing lessons from Google's CSS

Examine Google's intuitive designs and their implementation of CSS. Alongside resources such as Closure libraries and pixify.com, they can guide you to understand and apply key principles in your project (without copying, we respect IP here!).

Considering rendering without JavaScript

When reverse-engineering, focus on the underlying design principles and not just on imitation. Carefully consider how your page renders without JavaScript and borrow ideas from similar-looking open-source projects.