6 Simple CTA Button Styles With Hover Effects For Your Website

Written by Fabrizio Van Marciano
Updated on 
July 15, 2019

Creating customized website buttons using CSS have been one of the most requested tutorials over the years. I'm really not sure why because there are countless tutorials on creating stylish buttons for your website available online. Anyhow, I'm here to serve you the best way that I can, so they are. Enjoy.

Note: The video tutorial below will show you how to write both the HTML and CSS code for your CTA buttons and where to place them. The sixth button code is not included in this video.

Don't forget to subscribe to my YouTube channel for more website code, tips, tricks, and hacks.

Right then, if you're looking for some cool, stylish, call-to-action buttons to use on your WordPress website, well, you're in mega luck.

Below are 6 classic examples of button styles that I think are very popular in modern website design. I love using all of these designs myself, in both my personal and client website design projects, depending on the type of website I am creating, of course.

Anyone who has worked with me will know that I'm not a great fan of complexity. I like simplicity, and these HTML and CSS button designs are exactly that.

Each button below are made up of simple and lightweight code. They are attractive to look at and will make your landing pages truly stand out.

How to use these button styles

You'll see the button previews below, followed by the respective HTML and CSS code to make the buttons work on your own website or landing page. You may need to modify them a little bit due to default CSS settings that are in your WordPress theme.

Let's get started.

Button Style A (Slightly Rounded)

So the first button we have is a very simple design with slightly rounded off corners.

This style is one of the most popular which you will see on many types of websites and landing pages.

On hover, the button slowly transitions with slight letter-spacing and change of color to solid grey.

This example is a similar style of button effects that I use over on my blog at Magnet4Blogging.

Please find the HTML and CSS code below the preview button.

Note: You can change the class name to whatever you like, for instance: button_a and button_b. etc.

You can also change the color, padding, border, typography values to match your website design.

Button A Preview

Button A HTML

<div class="button_cont" align="center"><a class="example_a" href="add-website-here" target="_blank" rel="nofollow noopener">Add Call to Action</a></div>

Button A CSS

.example_a {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #ed3330;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}

Button A Hover CSS

.example_a:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

Button Style B (Rounded)

The second style of the button shown below is the same as the one above, however, the edges are made to appear a lot rounder.

On hover, the button is raised with a slight shadow effect. The text also has a slight shadow glow effect on hover.

Again, this button is fully customizable so feel free to edit it in any way you want.

Please find the HTML and CSS code below for this button.

Button B Preview

Button B HTML

<div class="button_cont" align="center"><a class="example_b" href="add-website-here" target="_blank" rel="nofollow noopener">Add Call to Action</a></div>

Button B CSS

.example_b {
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #60a3bc;
padding: 20px;
border-radius: 50px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}

Button B Hover CSS

.example_b:hover {
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}

Button Style C (Ghost)

So, the third button style I want to share is one of my favorite styles.

This style is often referred to as a 'ghost button effect'. This button is square with no rounded corners.

On hover, the button transitions into a solid orange button color and the text color changes to white. Please find HTML and CSS code below for this button.

Button C Preview

Button C HTML

<div class="button_cont" align="center"><a class="example_c" href="add-website-here" target="_blank" rel="nofollow noopener">Add Call to Action</a></div>

Button C CSS

.example_c {
color: #494949 !important;
text-transform: uppercase;
text-decoration: none;
background: #ffffff;
padding: 20px;
border: 4px solid #494949 !important;
display: inline-block;
transition: all 0.4s ease 0s;
}

Button C Hover CSS

.example_c:hover {
color: #ffffff !important;
background: #f6b93b;
border-color: #f6b93b !important;
transition: all 0.4s ease 0s;
}

Button Style D (Animated Border)

Right then! So the fourth button style you'll find below is a pretty cool one, actually.

Again, this is another ghost style button with slightly rounded off corners and a 3px border.

The difference is on the hover, the button transitions from green to grey, to fully rounded edges. The text color also changes.

Please find HTML and CSS code below for this button.

Button D Preview

Button D HTML

<div class="button_cont" align="center"><a class="example_d" href="add-website-here" target="_blank" rel="nofollow noopener">Add Call to Action</a></div>

Button D CSS

.example_d {
color: #20bf6b !important;
text-transform: uppercase;
background: #ffffff;
padding: 20px;
border: 4px solid #20bf6b !important;
border-radius: 6px;
display: inline-block;
transition: all 0.3s ease 0s;
}

Button D Hover CSS

.example_d:hover {
color: #494949 !important;
border-radius: 50px;
border-color: #494949 !important;
transition: all 0.3s ease 0s;
}

Button Style E (Animated Expanse)

Here's another style of button that you can try out on your website.

Check out the preview/demo below, you'll find this is a simple enough looking CTA button again with slightly rounded corners.

On hover, the button expands and turns transparent with a gradient shadow around the edge.

The letter spacing also increases on hover. When you move the pointer away from the button the letters transitions back to normal.

Please find the HTML and CSS codes for this button below.

Button E Preview

Button E HTML

<div class="button_cont" align="center"><a class="example_e" href="add-website-here" target="_blank" rel="nofollow noopener">Add Call to Action</a></div>

Button E CSS

.example_e {
border: none;
background: #404040;
color: #ffffff !important;
font-weight: 100;
padding: 20px;
text-transform: uppercase;
border-radius: 6px;
display: inline-block;
transition: all 0.3s ease 0s;
}

Button E Hover CSS

.example_e:hover {
color: #404040 !important;
font-weight: 700 !important;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.3s ease 0s;
}

Button Style F (Animated Pointer)

OK, so we get to the last button style and this one I think you're going to love the most.

Here we have a simple CTA button in gradient colors. On hover, the button transitions with animated arrows that appear in the button.

Below you'll find the HTML and complete CSS code. Best of luck.

Button F Preview

Button F HTML

<div class="button_cont" align="center"><a class="example_f" href="add-website-here" target="_blank" rel="nofollow"><span>Add Call To Action</a></div>

Button F CSS

example_f {
   border-radius: 4px;
   background: linear-gradient(to right, #67b26b, #4ca2cb) !important;
   border: none;
   color: #FFFFFF;
   text-align: center;
   text-transform: uppercase;
   font-size: 22px;
   padding: 20px;
   width: 200px;
   transition: all 0.4s;
   cursor: pointer;
   margin: 5px;
 }
 .example_f span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 0.4s;
 }
 .example_f span:after {
   content: '\00bb';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
 }
 .example_f:hover span {
   padding-right: 25px;
 }
 .example_f:hover span:after {
   opacity: 1;
   right: 0;
 }

It's a wrap!

So, my friends, there you have it. Six awesome button styles to add to your website complete with HTML and CSS.

Feel free to tweak and modify these buttons any way you wish. If you need assistance configuring them into your website, or if you run into any problems, let me know.

Remember, adding stylish CTA buttons to your website is easy. What you then have to do is to test which buttons on your pages are working best for you to boost your conversions.

Posted in ,

Are you ready to kickstart your web design project?

Let's work together to turn your website design and creative marketing ideas to life. Hit the 'Start Project' button to book your free 30-minute strategy consultation with me.
© Fabrizio Van Marciano Web Design Services. A division of Van Marciano Media. All Rights Reserved.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram