Stylish UI Button Hover Effects Using Pure CSS

Administrator

Author

Last edited: Thursday, October 01, 2026

Are you wondering how to make your buttons look more fun and visually appealing? Or are you looking for a modern button design to add to your website? Don’t worry, I’ve got you covered!

In this post, I’ll show you some stylish UI button hover effects built with pure CSS. No heavy scripts—just lightweight CSS that won’t contribute to slow page loading or add unnecessary weight to your website.

Why Buttons Matter

Buttons are important because they help guide users to where you want them to go, instead of relying only on plain text with an underlined link. For users who are not very tech-savvy, a button makes it clear that an element is clickable and will take them in the right direction.

Designing your own buttons can also be useful when creating an indie website. You can make your site more unique by customizing the buttons instead of using a formal and professional corporate-style design.

How to Style a Button

To style a button, we use CSS. CSS allows us to control how elements look on a website. We can write CSS inside a <style> tag or use an external CSS file. We can also use class names and IDs to apply specific styles to elements.

You can style buttons based on colors, typography, layout, and responsiveness. Responsive design allows your buttons to look good and remain usable on different screen sizes and devices, such as mobile phones, tablets, and desktops.

To style a button, we first need to create a style name for it. In CSS, we use a (.) for a class and a (#) for an ID.

Example:

.btn {color: #ffff; background: blue;} 
#btn {color: #ffff; background: red;}

Then, we can apply those styles in HTML:

<button class="btn">Hello</button> 
<button id="btn">Hello</button>

Although the class and ID use similar names in this example, they are different types of selectors and can be used to target different elements.

Below are some button designs that I made beforehand. You can customize the colors and styles to match your preferences and the overall design of your website. Simply click the button you want, and the source code will appear so you can copy and use it in your own project.

Before you can copy the style of the button you want, you need to add this to your CSS rule first. This will ensure that the buttons display correctly and don’t break your website layout.

.btn{position:relative;height:55px;padding:0 20px;font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;background:none;color:#ffffff;border:none;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;transition:all 0.3s ease;user-select:none;}

Live Demo Buttons

Generated Code

You can replace the <button> tag with an <a> tag, as long as you keep the same class name.

You can customize the color, size, border style, border radius, and hover effects to match your branding and make your site look more professional.

Border Style Button (Solid, Dotted & Dashed)

Insert the font link in your HTML document before the closing <head> tag. This font is used to create a hand-drawn effect, making the borders look more natural and sketch-like.

<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&amp;display=swap" rel="stylesheet">

<div class="btn-wrapper">
  <a class="lined thick">Lined Thick</a>
  <a class="dotted thick">Dotted Thick</a>
  <a class="dashed thick">Dashed Thick</a>
  <a class="lined thin">Lined Thin</a>
  <a class="dotted thin">Dotted Thin</a>
  <a class="dashed thin">Dashed Thin</a>
</div>
<style>
.btn-wrapper button {
  font-family: 'Patrick Hand SC', cursive;
  background: transparent;
  padding: 1rem 1.2rem;
  transition: all 0.4s ease;
  color: #41403E;
  font-size: 1rem;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
  box-shadow: 20px 38px 34px -26px rgba(0,0,0,0.2);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.btn-wrapper button:hover {
  box-shadow: 2px 8px 4px -6px rgba(0,0,0,0.3);
}
/* Border styles */
.btn-wrapper .lined.thick { border: 7px solid #41403E; }
.btn-wrapper .dotted.thick { border: 5px dotted #41403E; }
.btn-wrapper .dashed.thick { border: 5px dashed #41403E; }

.btn-wrapper .lined.thin { border: 2px solid #41403E; }
.btn-wrapper .dotted.thin { border: 2px dotted #41403E; }
.btn-wrapper .dashed.thin { border: 2px dashed #41403E; }
</style>

You can remove any button styles you don’t need, along with their CSS code. For example, if you only want .btn-wrapper .lined.thin, simply delete the other border style classes and keep only the one you want. Just make sure you only delete the related CSS for the buttons you're not using.

Preview

How to Add CSS Buttons in Blogger/Blogspot

If you're using Blogger/Blogspot, follow these steps:

Go to Theme in your Blogger dashboard.
Click the down arrow icon next to the Customize button
Select Edit HTML
Copy and paste the CSS inside your <style> tag
Then paste the HTML tag (e.g. <button class="btn btn13">Skew Button</button>) where you want the button/link to appear.

Final Thoughts

As you can see in the button designs demonstrated, you can style buttons into various shapes, including 3D and irregular forms. By using properties such as clip-path, transform, border, border-radius, and pseudo-elements like :hover, ::after, and ::before, you can customize your buttons to match your desired design.

We should try not to limit ourselves when it comes to creating engaging and fun UI designs. By experimenting with hover effects, borders, shapes, and layouts, you can create buttons that not only look modern and visually appealing but also make a website more interactive, enjoyable, and user-friendly.

Also read:

Contact Form