7 CSS Button Styles Examples For Your WordPress Website [Video 0:00]

Welcome back to another web design tutorial folks. In this post, we’ll look at some classic css button styles you can experiment with and use in your next project.

Button design should never be an afterthought. Why settle for a dull, uninspiring button when you can use it to elevate your design and make it truly stand out?

Here are seven timeless examples of CSS button styles that are highly popular in modern website design. I’ve frequently used these styles in various projects over the years.

These button styles are intentionally kept simple. If you’ve worked with me before, or have watched any of my other WordPress tutorial videos, you’ll know I’m not a fan of overly complex or convoluted code for something that can be done easily and effectively.

Complexity tends to feel overwhelming to me. Instead, I prefer a clean and straightforward approach, and these HTML and CSS button designs reflect that philosophy—no over-the-top techniques here.

Each button is crafted using minimal code. They’re visually appealing and are sure to make the key conversion elements of your website stand out!

The video tutorial below demonstrates how to create the HTML markup and CSS for your CTA buttons, as well as where to position them. Please note that the sixth and seventh examples in this post are not covered in the video.

[THIS VIDEO IS CURRENTLY BEING UPDATED. PLEASE CHECK BACK SOON]

How to use the CSS Button examples below

Below, you’ll find previews of the buttons along with the HTML and CSS code snippets available.

If the buttons look slightly different on your website, you may need to make a few adjustments. This could be due to the default CSS in your WordPress theme or template impacting their appearance.

If you are using a page builder such as Bricks or Oxygen, you can add the HTML inside of a code block or element.

Button Style A: Slightly Rounded

Our first button is a simple, flat design featuring slightly rounded corners—a style widely favored in modern web design, particularly on conversion pages.

When hovered over, the button transitions smoothly with subtle letter spacing and a color change from red to solid gray.

The HTML and CSS code for this button are provided below.

EDIT ON CODEPEN

<div class="container-name">
   <a class="example_a" href="#" target="_blank" rel="nofollow"><span>Button</span></a>
</div>

/* Color Variables
------*/
:root {
   --color-red: #ED3330;
   --color-white: #FFFFFF;
   --color-slate: #434343;
}

.container-name {
   margin-left: 3rem;
   margin-top: 3rem;
}

.example_a {
   font-family: 'Open Sans';
   color: var(--color-white);
   text-transform: uppercase;
   text-decoration: none;
   background: var(--color-red);
   padding: 1rem;
   border-radius: 5px;
   display: inline-block;
   border: none;
   transition: all 0.4s ease 0s;
}

.example_a:hover {
   background: var(--color-slate);
   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: Fully Rounded

This second button style is similar to the first, but with much rounder edges achieved using a 50% border radius.

On hover, the button elevates with a subtle drop shadow effect, while the text gains a soft glowing shadow for added emphasis.

The HTML and CSS code for this button are provided below.

EDIT ON CODEPEN

<div class="container-name">
   <a class="example_b" href="#" target="_blank" rel="nofollow"><span>Button</span></a>
</div>

/* Color Variables
-------*/
:root {
   --color-white: #FFFFFF;
   --color-blue: #60A3BC;
}

.container-name {
   margin-left: 3rem;
   margin-top: 3rem;
}

.example_b {
   font-family: 'Poppins';
   color: var(--color-white) !important;
   text-transform: uppercase;
   font-weight: 700;
   text-decoration: none;
   background: var(--color-blue);
   padding: 1rem;
   border-radius: 5rem;
   display: inline-block;
   border: none;
   transition: all 0.4s ease 0s;
}

.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 Button Effect

The third CSS button style is one of my personal favorites and a go-to choice for many projects.

Known as the “ghost button effect,” this design features a square button with sharp corners and a 2px solid border.

On hover, the button smoothly transitions to a solid orange background, while the text color shifts to white. You’ll find the HTML and CSS code for this style below.

EDIT ON CODEPEN

<div class="container-name">
   <a class="example_c" href="#" target="_blank" rel="nofollow"><span>Button</span></a>
</div>

/* Color Variables
------*/
:root {
   --color-white: #FFFFFF;
   --color-slate: #494949;
   --color-yellow: #F6B93B;
}

.container-name {
   margin-left: 3rem;
   margin-top: 3rem;
}

.example_c {
   font-family: 'Open Sans';
   color: var(--color-slate);
   text-transform: uppercase;
   text-decoration: none;
   background: var(--color-white);
   padding: 1rem;
   border: 4px solid var(--color-slate);
   display: inline-block;
   transition: all 0.4s ease 0s;
}

.example_c:hover {
   color: var(--color-white);
   background: var(--color-yellow);
   border-color: var(--color-yellow);
   transition: all 0.4s ease 0s;
}

Button Style D: Dynamic Ghost Button

The fourth button style is a unique design that I haven’t used frequently but still stands out.

Similar to the ghost-style button, this version features slightly rounded corners and a 2px solid border.

On hover, the button transitions from green to gray while its corners become fully rounded. The text color also changes during the transition.

The HTML and CSS code for this style can be found below.

EDIT ON CODEPEN

<div class="container-name">
   <a class="example_d" href="#" target="_blank" rel="nofollow"><span>Button</span></a>
</div>

/* Color Variables
------*/
:root {
   --color-white: #FFFFFF;
   --color-green: #20BF6B;
   --color-slate: #494949;
}

.container-name {
   margin-left: 3rem;
   margin-top: 3rem;
}

.example_d {
   font-family: 'Open Sans';
   color: var(--color-green) !important;
   text-transform: uppercase;
   background: var(--color-white);
   padding: 1rem;
   border: 4px solid var(--color-green) !important;
   border-radius: 6px;
   text-decoration: none;
   display: inline-block;
   transition: all 0.3s ease 0s;
}

.example_d:hover {
   color: var(--color-slate) !important;
   border-radius: 5rem;
   border-color: var(--color-slate) !important;
   transition: all 0.6s ease 0s;
}

Button Style E: Expanding Gradient Effect

Here’s another button style you can try on your website, perfect for driving clicks on landing or sales pages.

In its default state, the button is simple and understated. On hover, it expands and becomes transparent, revealing a striking gradient shadow around the edges—an eye-catching effect.

The letter spacing also increases during the hover state, returning to normal when the pointer moves away.

If the transition feels too quick, you can adjust the duration to something like 0.7s for a smoother effect.

You’ll find the HTML and CSS code for this button below.

EDIT ON CODEPEN

<div class="container-name">
   <a class="example_e" href="#" target="_blank" rel="nofollow"><span>Button</span></a>
</div>

/* Color Variables
------*/
:root {
   --color-white: #FFFFFF;
   --color-slate: #404040;
}

.container-name {
   margin-left: 3rem;
   margin-top: 3rem;
}

.example_e {
   color: var(--color-white);
   font-weight: 100;
   text-decoration: none;
   text-transform: uppercase;
   background: var(--color-slate);
   border: none;
   padding: 1rem;
   border-radius: 6px;
   display: inline-block;
   transition: all 0.3s ease 0s;
}

.example_e:hover {
   color: var(--color-slate);
   font-weight: 700;
   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: Gradient with Animated Arrows

Here’s the next button style, and I think it might just be your favorite!

This design features a simple yet elegant CTA button with a gradient background. On hover, animated arrows gracefully appear on the right side of the button, adding a dynamic touch.

It’s perfect for encouraging clicks, such as guiding users to the next step in a process (like a web form) or directing them to another page or blog post.

You’ll find the complete HTML and CSS code for this button below.

EDIT ON CODEPEN

<div class="container-name">
   <a class="example_f" href="#" target="_blank" rel="nofollow"><span>Button</span></a>
</div>

/* Color Variables
------*/
:root {
   --color-white: #FFFFFF;
}

.container-name {
   margin-left: 3rem;
   margin-top: 3rem;
}

.example_f {
   border-radius: 4px;
   background: linear-gradient(to right, #67b26b, #4ca2cb) !important;
   border: none;
   color: var(--color-white);
   text-align: center;
   font-size: 1.6rem;
   padding: 1rem;
   width: 20rem;
   transition: all 0.4s;
   cursor: pointer;
}

.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: -2rem;
   transition: 0.5s;
}

.example_f:hover span {
   padding-right: 2.5rem;
}

.example_f:hover span:after {
   opacity: 1;
   right: 0;
}

Button Style G: Retro Wave Neon Vibes

I’ve always been a big fan of retrowave and neon aesthetics. Fun fact: I create synthwave music in my spare time, and some of my beats are even on Spotify (a little trivia for you!).

Now, onto this retro wave-inspired CSS button style—it’s a real showstopper. While it’s a bit more complex than the other designs, the neon glow and retro vibe make it absolutely worth it. Take a look and see for yourself!

EDIT ON CODEPEN

<button class="example_g" type="button">Hover, Click And Hold!</button>

/* Ignore this part if you already have your page set up or you are using a page builder in WordPress
------*/
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #3B3B3B
}

/* Color variables
------*/
:root {
   --color-white: #FFFFFF;
   --color-slate: #494949;
   --color-black: #000000;
}

.example_g {
   font-family: 'Poppins';
   width: 320px;
   padding: 1rem;
   height: 50px;
   border: none;
   outline: none;
   color: var(--color-slate);
   background: var(--color-white);
   text-transform: uppercase;
   font-weight: 800;
   letter-spacing: 4px;
   cursor: pointer;
   position: relative;
   z-index: 0;
   transition: 0.5s ease-in-out;
}

.example_g:before {
    content: '';
    background: linear-gradient(45deg, #FF0000, #FFF700, #FF7000, #FF00FE, #3FF4EB, #9E00FF, #00BEFF, #FF00DD, #FF0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.example_g:active {
    color: var(--color-black);
}

.example_g:active:after {
    background: transparent;
}

.example_g:hover {
    transform: scale(1.05);
}

.example_g:hover:before {
    opacity: 1;
}

.example_g:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    left: 0;
    top: 0;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

Its a wrap!

And there you have it—seven fantastic button styles ready to enhance your website, complete with fully customizable HTML and CSS.

Feel free to adjust and personalize these designs however you like. If you need help integrating them into your website or encounter any issues, don’t hesitate to reach out.

Remember, adding eye-catching CTA buttons is just the first step. Be sure to test and analyze which button styles perform best on your pages to maximize your conversions!

Subscribe for access to more code snippets!

If you enjoyed this resource post, why not subscribe to my email newsletter and get notified when we publish new code snippets!