A Modern Outlined Button with Hover Effect (Free HTML/CSS Template)

Looking for a stylish, responsive button that feels modern but isn’t over-designed?

‍

This clean outlined button with a sharp hover effect is perfect for landing pages, sign-up prompts, or any section where you want a button that stands out—without being too loud.

‍

Let’s walk through what it is, how to use it, and where it works best.

What an Outlined Button Looks Like

Outlined border, here with a soft orange tone (#fca311)
Transparent background by default
Smooth hover effect that fills the background with orange and flips the text to black
Rounded corners and responsive behavior for mobile

‍

This creates a sleek, call-to-action button that feels interactive and modern.

Responsive by Default

This button isn’t just good-looking—it’s also mobile-friendly.

‍

On smaller screens (tablets and phones), it automatically becomes a full-width button with top and bottom spacing.

‍

This makes it perfect for:

‍

Responsive landing pages
Mobile-first web design
Forms and modals with limited space

Great Use Cases for This Button

Signup or newsletter callouts
Pricing pages (for "Get Started" or "Try Now" CTAs)
Hero sections where visual simplicity matters
Anywhere you want a button that blends in until it’s hovered, drawing attention right when it’s needed

‍

HTML Code

Optional: If you want the button to use the same font shown in the preview (Cabin), add this to your `<head>` section:

‍

<!-- Add to <head> section if using the Cabin font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap">

‍

Now paste this inside your <body>:

‍

<!-- Button -->
<button
  class="fs-btn-orange-black-rounded-outlined"
  aria-label="Sign up for an account"
>
  Sign Up
</button>

‍

CSS Code

Paste this into your CSS file or inside a <style> tag:

‍

/* Button Styling */
.fs-btn-orange-black-rounded-outlined {
  background-color: transparent;
  color: #fca311;
  display: inline-block;
  text-align: center;
  padding: 0 20px;
  height: 40px;
  min-width: 100px;
  font-family: "Cabin", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  border: 2px solid #fca311;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover Effect */
.fs-btn-orange-black-rounded-outlined:hover {
  background-color: #fca311;
  color: #000000;
}

/* Responsive Full-Width Buttons on Tablets and Smaller Screens */
@media screen and (max-width: 767px) {
  .fs-btn-orange-black-rounded-outlined {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}

See the Live Preview and Get More Buttons

You can see a live preview of this button—plus many other types and styles—inside our app: Browse Fullstackista Templates.