10 Pure CSS Call-To-Action Button Sets

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/CrMqABfo0lk/

Every website and landing page should have a clear call-to-action button. This encourages the user to click and perform an action, whether to make a purchase, start a trial, or sign up for an account.

There is no single best way to design a CTA and you can use many different styles, from large gradients to ghost buttons, and everything inbetween. But other factors like color, size, and position also have an affect on usability.

I’ve hand-picked 10 of my favorite CTA designs, all built with pure CSS. If you’re looking for CTA inspiration, then you’re bound to find something in this collection.

1. Floating Button

Here’s one of the most unique styles I’ve seen and it’s certainly not common on the web. This floating button could become a staple for landing pages that mesh nicely with the design.

It uses a CSS3 drop shadow along with a repeating animation to create the floating effect. This all runs through CSS which makes it even easier to replicate for your own project.

Granted, the hover effect is a bit dull, although the actual button design itself more than makes up for this. Plus you can always expand the hover effect to include other CSS3 animations if you’re willing to push the envelope.

2. Green Circled CTA

You’ll find plenty of CTAs like this on landing pages promoting offers or ebooks. They often use the red hand-drawn circle effect to make it blend into the page and seem more natural to click.

What’s cool about this green CTA button is the hover effect animation. It works on both the button and the red squiggles in the background. Certainly not the effect you’d assume at first glance!

But for a real easy CTA, that’s sure to grab attention, you should try this out. And since the button uses pure CSS you can easily change the color scheme to match any layout.

3. Material Button

If you like working with Google’s material design then you’ll love this unique button set. It’s built in one single style but offers two different triggers: mouse hover and click.

The button snippet uses SCSS/Sass for CSS code, but you can compile it down into CSS right from CodePen. This makes it easier to copy/paste the code for personal use if you’re not a big Sass fan.

The animation effects mimic Google’s design guidelines, so this set is brilliant for any material web project you might be creating.

4. Colorful CTAs

Super small and easy-to-use best describes this button set created by developer Rohan Nair.

The color choices are made to match but you can always change the scheme in CSS. The real eye-catching effect here is the click animation that moves the button “down” into the page.

This gives the illusion of depth and helps each button stand out from other elements on the page.

Again this all uses pure CSS, so it’s a pretty easy button set to copy and customize.

5. Micro Interaction Button

If you want even greater button animation effects take a peek at these microinteraction buttons designed by Phil Hoyt.

They use Font Awesome for the arrow icons mixed with custom CSS animations. While hovering any button, the text label animates out of view and instead displays the icon font prominently.

Depending on your CTA design this may not work as well, especially if you can’t find an icon to represent the button behavior. clearly

Although if you can work this into your site, the hover effect is bound to grab attention.

6. Bordered Buttons

I found these bordered buttons while skimming CodePen and they immediately stood out from the herd.

They don’t inherently feel like CTAs, but with larger text or a larger button size these little designs could dominate a header with ease.

Each button uses the CSS translate() method along with custom background colors to create the border effect. It’s a fairly complicated technique but it’s also the best method considering a plain CSS border wouldn’t animate the same way.

If you like these designs and want to give them a shot, they should run smoothly in every modern web browser.

7. Gradient Styles

Classic gradient buttons will never go out of style and they’re used prominently in larger frameworks like Bootstrap.

With these gradient buttons you can easily update the hover & click animations all while keeping true to the color format. It uses LESS CSS which makes it easier to darken gradient colors using percentages rather than hex codes.

I always like gradient buttons so long as they blend with a layout. And these certainly aren’t the only gradient styles you’ll find so check CodePen if you’re looking for more.

8. YouTube Call to Action

Here’s a rather unique CTA that leads to a YouTube video. It’s a fixed badge in the lower-right corner of the screen and while hovering you can see the video CTA appear on top.

It’s a pretty simple design but it’s not going to be useful on every web page. It can be used to promote deals, new releases, and of course links to other sites like YouTube.

But if you’re looking for a prominent CTA button for your page header, this template won’t help much. Still a very unique idea and certainly worth saving if you could ever use something like this in the future.

9. Flip-Down Buttons

3D animations for the web are easy to create if you know what you’re doing. But even if you don’t understand CSS it’s just as easy to copy 3D code snippets like these flip-down buttons made by Arnie McKinnis.

They’re built on LESS, but you can turn that into plain CSS right inside CodePen. The buttons rely on CSS transforms to create the 3D effect which only appears on mouse hover.

It’s a pretty unique design because the CTA itself is technically “under” the button. Hovering only displays the clickable link underneath making the colorful button more of a fancy shell to grab attention.

But if you like the 3D animated effect, definitely give this a try on your own site.

10. Pure CSS Hovers

Rather than focusing on a unique design or color scheme these pure CSS buttons offer custom hover animations.

They all look similar to typical ghost buttons where you have a border color and no internal color. But while hovering you’ll notice each button’s border style animates into something new.

It’s a tricky effect to get right, and it’s not something you can just pick up and customize without some effort. Although if you know your way around CSS, you should figure it out pretty quickly.

11. Pulsing CTA

If you’re looking to consistently grab attention from visitors then try this pulsing CTA design. It uses a delay via CSS to create a repeating pulse animation with an outer glow.

But if you dive into the CSS code, you can change the pulse animation to be anything you like. It’s pretty versatile, and of course, it should blend in nicely with any design.

Also if you click the “X” icon in the corner you’ll get to see the full animation effect all over again. This loads the button into view along with the window so it even has a cool animation for the first pageload.

Most websites use pure CSS buttons these days so it’s not all that difficult to find one you like and clone the code for a kick-ass CTA.