Skip to main content
Articles

Wally’s Neato CSS Google Like Button

Screen Shot 2014-03-14 at 11.58.43 AM

The code: (Insert into your HTML or PHP code)
<div class="neato-button"><a href="http://somewhere.com">Get Tickets</a></div>

The CSS: (Insert into your CSS stylesheet)

.neato-button { /* This is the non-hover state */
text-decoration: none;
background-color: #ea3635;
/* change to fit */
padding: 10px 30px;
color: white !important;
border-radius: 5px;
/* I’m forcing a min-width, can be deleted */
min-width: 200px;
text-align: center;
font-weight: bold;
/* I’m forcing uppercase - delete if you don’t like that */
text-transform: uppercase;
/* Whatever font you want, I just happened to be using this google font */
font: 400 16px 'Open Sans', sans-serif;
/* Optional border - i'm not using it in the image above */
border: 2px solid silver;
}

.neato-button:hover { /* This is the hover state */
text-decoration: none;
color: #ffffff !important;
/* If you deleted this above, delete it here too. */
text-transform: uppercase;
/* Make sure and match this to the font above */
font: 400 16px 'Open Sans', sans-serif;
background-color: #fecd70;
}