Toll Free: 1-877-695-7388

GTA: (647) 699-2838

Search Engine People
  • SEO
  • SEM
  • CRO
  • Display
  • Blog
  • Why Us
  • Contact
  • Join Our Team
  • Get A Quote

Toll Free: 1-877-695-7388

GTA: (647) 699-2838

Pure CSS Buttons to Help with Pageload Speed

Dean Cruddace | August 23rd, 2011
Tweet
Share1
Share
Pin
1 Shares

CSS of any version that goes up against any image of any size is generally going to win, there are an abundance of conversations out there about conversion rate optimization and how you should have your button this colour or this size, placed here or placed there for better opportunities to convert. That is a conversation for another day.

I wanted to take a closer look at using CSS to replicate these buttons without actually using an image. Why? Faster pageload speed, plain and simple.

Images and code bloat are the biggest drawbacks to how fast your pages load, we already knew that, but what if you could replace some of those images, those calls to action on your landing pages to load that little bit quicker? Well we can. Take the following example.

The CSS


.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
box-shadow:inset 0px 1px 0px 0px #a4e271;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0f2f22), color-stop(1, #0f2f22) );
background:-moz-linear-gradient( center top, #0f2f22 5%, #0f2f22 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f2f22', endColorstr='#0f2f22');
background-color:#89c403;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #74b807;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #528009;
}.myButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0f2f22), color-stop(1, #89c403) );
background:-moz-linear-gradient( center top, #0f2f22 5%, #89c403 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f2f22', endColorstr='#89c403');
background-color:#0f2f22;
}.myButton:active {
position:relative;
top:1px;
}

This will result in a generated CSS button like this;

Call to Action

Now using an image for the same effect will involve using sprites and result in at the very least an extra 4kb added to the load time as opposed to 2kb for the CSS version. The extra benefits of using CSS in this way are that you do not have to open an image editor every time you want to create a new button, it is all defined by using the class="myButton" and using whatever anchor text you would have used anyway.

Drawbacks
There are drawbacks to using this CSS method to creating your buttons this way in that versions of IE prior to Internet Explorer 9 can not handle -moz-border-radius and you end up with CSS buttons that are obviously not rounded off.

So there you have it, a very quick win for pageload speed. All credit for the code goes to CSS Button Generator for making my life so much easier.

Tweet
Share1
Share
Pin
1 Shares
Posted in Web DesignTagged CSS, design, howto, usability, Web Design

About the Author: Dean Cruddace

Dean Cruddace is an SEO Consultant in the North East of the UK delivering On Site SEO and content creation. Also a co-admin of the SEO Company Directory

SEO Begin Ltd

3 thoughts on “Pure CSS Buttons to Help with Pageload Speed”

  1. Robin Parduez says:
    August 24, 2011 at 2:02 am

    Good post Dean, I’d just add one small point that IE wouldn’t support -moz-border-radius as that is a browser-specific declaration for Mozilla Firefox. Just as -webkit-border-radius is for Webkit-based browsers. IE9 supports border-radius instead, as shown here: http://ie.microsoft.com/testdrive/html5/borderradius/default.html. I’m all in favour of finding ways to speed up page loads, and CSS3 techniques are making this easier.

    1. Dean Cruddace says:
      August 24, 2011 at 9:44 am

      @Robin, yeah that’s one of the things I noticed as well and highlighted that in the post. IE9 and above does support it though, shame really, such a nice effect you would think it would be such a small update to ad it to IE7 and 8.

      Cheers for the comment.

  2. Loc says:
    August 26, 2011 at 9:52 pm

    Google also takes into account how fast your page loads when they are determining your website page rank. So if your page loads a lot faster, Google likes it and your customer will like it as well.

    Like all the other users out there, if a website takes too long to load, I just leave and probably never come back. So if you improve the load time with CSS then I’m all for it.

Comments are closed.

Recent Posts

  • The Manifest Names Search Engine People Among Toronto’s Most Reviewed SEO Companies
  • Movin’ On Up! Why Migrating to Google Analytics 4 (GA4) Should be a Priority
  • A Year in Review: The Digital Marketing Trends That Defined 2021
  • The Basics of Video Marketing
  • Just How Much Do Google Reviews Impact Your SEO Ranking?

Categories

  • Analytics & ROI Analysis
  • Company News
  • Content
  • Conversion Optimization
  • Display Advertising/RTB
  • Email Marketing
  • En Español
  • En Français
  • Inbound Marketing
  • Lead Nurture & Marketing Automation
  • Local Search
  • Marketing
  • Mobile
  • Partnership Marketing
  • PPC
  • PR
  • SEO
  • Social Media Marketing
  • Web Design

Additional Posts

Toss Out the Essay: The 7 Alternate Styles for SEO Copywriting

August 23rd, 2011 | by Mandy Pennington

10 Things Google Wished You Knew

August 23rd, 2011 | by Ruud Hein

Accidental Branding Genius

August 22nd, 2011 | by Will Scott

LET'S TALK

Need more information or want to get in touch?

Get in touch!
  • SEO
  • SEM
  • Display
  • Blog
  • Why Us
  • Join Our Team
  • Contact Us
  • Local SEO
  • Small Business SEO
  • Enterprise SEO
  • International SEO

LOCATION

1305 Pickering Parkway,
5th Floor Pickering, L1V 3P2

PHONE

Toll Free: 1-877-695-7388
Greater Toronto Area: (647) 699-2838

Social

© Search Engine People Inc. 2023 – Canada’s Top Digital Agency
© SEP 2023 – A Search Engine People Company | Privacy Policy

Search Engine People