Professional WordPress development services, and awesome WordPress content, including as tutorials, snippets, reviews, downloads, and more.

How to Create Tactile Buttons with CSS

Updated · Ren Ventura · 2 Comments

Tutorials

Did this tutorial help you? Perhaps you'd like to show thanks by treating me to a burrito?

How to Create Tactile Buttons with CSS

Unless otherwise noted, any code snippet in this post goes in your theme's functions.php file or a plugin for your custom functions.

I received a question the other day about how to create this kind of button:

Hover Over Me to See

It’s actually very simple. This is nothing more than a regular link that’s been styled to look like a tactile button. Basically, when the user hovers over it, it appears to be an actual button that has been pressed down. Here’s some CSS I use on this website that I’ve modified for general use. Adjust it to fit your own preferences.

To utilize this CSS, create a link and give it a class of tactile-link. Here’s an example to get you started.

<a href="#" class="tactile-button">Link Text</a>

Ren Ventura

Hey, I'm Ren. I like to sling code, build stuff for WordPress and write about the stuff I do. If you need help, have a question or just want to shoot the breeze, you can hit me up in the comments, via email, or on Twitter.

Featured Blog Post

We host EngageWP on SiteGround WordPress hosting service. Read our SiteGround review to find out why we love them so much.

Affiliate Disclosure

Some of the links in this post may be "affiliate links." This means that if you click on the link and purchase the item to which we are linking, we may receive an affiliate commission. We want to emphasize that we do not, and never will, link to a product only for possible financial gain. Doing so does not provide real value, and is a disservice to our readers. We do not link to products we feel are inferior, and we are not compensated for any positive review. Privacy Policy

    • Avatar for RenRen says

      It’s really only a matter of what you’ve seen and what you like. Personally, I also like buttons that have a left-top box-shadow that disappears on hover. Buttons aren’t too hard to style so you just have to decide on what you like.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Before Commenting

If your comment contains a bogus name or email, or is an obvious promotion, it will be discarded.