Cool CSS Buttons - Pheasant Demure Buttons

We are excited to share CSS button styles under the project Pheasant Demure Buttons. We have created Solid CSS Buttons, Outline CSS Buttons, and different button hover effects.

CSS buttons play a crucial role in enhancing user interaction and aesthetics in minimalist web design. By utilizing simple yet elegant styles, CSS allows designers to create buttons that blend seamlessly with the overall clean and uncluttered look.

Pheasant Demure Buttons are minimal, elegant, and easy to use. They will look cool on design interfaces.

Table of Content

Setup

Demo

Download

Setup

It is very easy to set up Pheasant Demure Buttons.

HTML Document Head Setup

You may need the followings in the head tag of HTML document,

Google Fonts

We are using Google Cairo font in our button CSS examples. We recommend using this font.

<!-- Google Fonts: Recommended -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600&display=swap" rel="stylesheet">

Icon Fonts

Icon fonts are optional. You can use icon fonts if you are planning to use icons in your button style. We have used Google Material Icons in this example.

<!-- Icon Fonts: Optional -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Pheasant Demure Buttons Theme

Pheasant Demure Buttons Reset and Layout is Optional. You are not required to include these styles if your theme or web design is already resetting or normalizing the rules.

<!-- Pheasant Buttons -->
<!-- Pheasant Demure Buttons Reset: Optional -->
<link rel="stylesheet" href="./dist/css/pheasant-demure-buttons-reset.css" type="text/css" media="all" />
<!-- Pheasant Demure Buttons Layout: Optional -->
<link rel="stylesheet" href="./dist/css/pheasant-demure-buttons-layout.css" type="text/css" media="all" />
<!-- Pheasant Demure Buttons: Required -->
<link rel="stylesheet" href="./dist/css/pheasant-demure-buttons.css" type="text/css" media="all" />

HTML Supported Tags

You can use Pheasant Demure Buttons for a, button, and submit tags.

Solid CSS Buttons – Standard

You can choose between light and dark essences in solid style buttons. Customization of colors is super easy in Pheasant Demure Buttons.

<button type="button" class="pheasant-demure-button solid light">
  <span class="label">Standard</span>
</button>

<button type="button" class="pheasant-demure-button solid dark">
  <span class="label">Standard</span>
</button>

<button type="button" class="pheasant-demure-button solid light hover blink">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button solid dark hover blink">
  <span class="label">Hover Blink</span>
</button>

Solid CSS Buttons – Icon

You can enhance the interface of CSS buttons with animated icons. Here are the examples with an arrow animated icon.

<button type="button" class="pheasant-demure-button solid light hover icon">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button solid dark hover icon">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button solid light hover icon blink">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button solid dark hover icon blink">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</button>

Solid CSS Buttons Rounded Corners

We have also added CSS rules for rounded corner buttons. You can get rounded buttons for any variant of button.

<button type="button" class="pheasant-demure-button solid light round-corner">
  <span class="label">Standard</span>
</button>

<button type="button" class="pheasant-demure-button solid dark round-corner">
  <span class="label">Standard</span>
</button>

<button type="button" class="pheasant-demure-button solid light hover blink round-corner">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button solid dark hover blink round-corner">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button solid light hover icon round-corner">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button solid dark hover icon round-corner">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button solid light hover icon blink round-corner">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button solid dark hover icon blink round-corner">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</button>

Solid CSS Buttons – Standard – Hover Effects

<button type="button" class="pheasant-demure-button solid light hover blink">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button solid dark hover blink">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-light hover curtain-to-right">
  <span class="label">Hover Right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-dark hover curtain-to-right">
  <span class="label">Hover Right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-light hover curtain-to-left">
  <span class="label">Hover Left</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-dark hover curtain-to-left">
  <span class="label">Hover Left</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-light hover curtain-to-bottom">
  <span class="label">Hover Bottom</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-dark hover curtain-to-bottom">
  <span class="label">Hover Bottom</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-light hover curtain-to-top">
  <span class="label">Hover Top</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-dark hover curtain-to-top">
  <span class="label">Hover Top</span>
</button>

Solid CSS Buttons – Icon – Hover Effects

<button type="button" class="pheasant-demure-button solid light hover blink icon">
  <span class="label">Hover Blink</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button solid dark hover blink icon">
  <span class="label">Hover Blink</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-light hover curtain-to-right icon">
  <span class="label">Hover Right</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-dark hover curtain-to-right icon">
  <span class="label">Hover Right</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-light hover curtain-to-left icon">
  <span class="label">Hover Left</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-dark hover curtain-to-left icon">
  <span class="label">Hover Left</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-light hover curtain-to-bottom icon">
  <span class="label">Hover Bottom</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-dark hover curtain-to-bottom icon">
  <span class="label">Hover Bottom</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-light hover curtain-to-top icon">
  <span class="label">Hover Top</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-solid curtain-dark hover curtain-to-top icon">
  <span class="label">Hover Top</span>
  <span class="material-icons icon">chevron_right</span>
</button>

Outline CSS Buttons – Standard

CSS outline buttons are designed by using CSS border property. These CSS buttons will look great on design interfaces.

<button type="button" class="pheasant-demure-button outline light">
  <span class="label">Standard</span>
</button>

<button type="button" class="pheasant-demure-button outline dark">
  <span class="label">Standard</span>
</button>

<button type="button" class="pheasant-demure-button outline light hover blink">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button outline dark hover blink">
  <span class="label">Hover Blink</span>
</button>

Outline CSS Buttons – Icon

<button type="button" class="pheasant-demure-button outline light hover icon">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button outline dark hover icon">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button outline light hover icon blink">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button outline dark hover icon blink">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</button>

Outline CSS Button Rounded Corners

<button type="button" class="pheasant-demure-button outline light round-corner">
  <span class="label">Standard</span>
</button>

<button type="button" class="pheasant-demure-button outline dark round-corner">
  <span class="label">Standard</span>
</button>

<button type="button" class="pheasant-demure-button outline light hover blink round-corner">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button outline dark hover blink round-corner">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button outline light hover icon round-corner">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button outline dark hover icon round-corner">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button outline light hover icon blink round-corner">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button outline dark hover icon blink round-corner">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</button>

Outline CSS Buttons – Standard – Hover Effects

<button type="button" class="pheasant-demure-button outline light hover blink">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button outline dark hover blink">
  <span class="label">Hover Blink</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-light hover curtain-to-right">
  <span class="label">Hover Right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-dark hover curtain-to-right">
  <span class="label">Hover Right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-light hover curtain-to-left">
  <span class="label">Hover Left</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-dark hover curtain-to-left">
  <span class="label">Hover Left</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-light hover curtain-to-bottom">
  <span class="label">Hover Bottom</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-dark hover curtain-to-bottom">
  <span class="label">Hover Bottom</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-light hover curtain-to-top">
  <span class="label">Hover Top</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-dark hover curtain-to-top">
  <span class="label">Hover Top</span>
</button>

Outline CSS Buttons – Icon – Hover Effects

<button type="button" class="pheasant-demure-button outline light hover blink icon">
  <span class="label">Hover Blink</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button outline dark hover blink icon">
  <span class="label">Hover Blink</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-light hover curtain-to-right icon">
  <span class="label">Hover Right</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-dark hover curtain-to-right icon">
  <span class="label">Hover Right</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-light hover curtain-to-left icon">
  <span class="label">Hover Left</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-dark hover curtain-to-left icon">
  <span class="label">Hover Left</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-light hover curtain-to-bottom icon">
  <span class="label">Hover Bottom</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-dark hover curtain-to-bottom icon">
  <span class="label">Hover Bottom</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-light hover curtain-to-top icon">
  <span class="label">Hover Top</span>
  <span class="material-icons icon">chevron_right</span>
</button>

<button type="button" class="pheasant-demure-button curtain-outline curtain-dark hover curtain-to-top icon">
  <span class="label">Hover Top</span>
  <span class="material-icons icon">chevron_right</span>
</button>

Input Type Submit Button Examples

Tag <input type="submit"> does not support icons.

<input type="submit" value="Standard" class="pheasant-demure-button solid light">

<input type="submit" value="Standard" class="pheasant-demure-button solid dark">

<input type="submit" value="Hover Blink" class="pheasant-demure-button solid light hover blink">

<input type="submit" value="Hover Blink" class="pheasant-demure-button solid dark hover blink">

<input type="submit" value="Standard" class="pheasant-demure-button solid light round-corner">

<input type="submit" value="Standard" class="pheasant-demure-button solid dark round-corner">

<input type="submit" value="Hover Blink" class="pheasant-demure-button solid light hover blink round-corner">

<input type="submit" value="Hover Blink" class="pheasant-demure-button solid dark hover blink round-corner">

<input type="submit" value="Standard" class="pheasant-demure-button outline light">

<input type="submit" value="Standard" class="pheasant-demure-button outline dark">

<input type="submit" value="Hover Blink" class="pheasant-demure-button outline light hover blink">

<input type="submit" value="Hover Blink" class="pheasant-demure-button outline dark hover blink">

<input type="submit" value="Standard" class="pheasant-demure-button outline light round-corner">

<input type="submit" value="Standard" class="pheasant-demure-button outline dark round-corner">

<input type="submit" value="Hover Blink" class="pheasant-demure-button outline light hover blink round-corner">

<input type="submit" value="Hover Blink" class="pheasant-demure-button outline dark hover blink round-corner">

Link Tag <a> Button Examples

<a href="#" class="pheasant-demure-button solid light">
  <span class="label">Standard</span>
</a>

<a href="#" class="pheasant-demure-button solid dark">
  <span class="label">Standard</span>
</a>

<a href="#" class="pheasant-demure-button solid light hover blink">
  <span class="label">Hover Blink</span>
</a>

<a href="#" class="pheasant-demure-button solid dark hover blink">
  <span class="label">Hover Blink</span>
</a>

<a href="#" class="pheasant-demure-button solid light hover icon">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button solid dark hover icon">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button solid light hover icon blink">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button solid dark hover icon blink">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button solid light round-corner">
  <span class="label">Standard</span>
</a>

<a href="#" class="pheasant-demure-button solid dark round-corner">
  <span class="label">Standard</span>
</a>

<a href="#" class="pheasant-demure-button solid light hover blink round-corner">
  <span class="label">Hover Blink</span>
</a>

<a href="#" class="pheasant-demure-button solid dark hover blink round-corner">
  <span class="label">Hover Blink</span>
</a>

<a href="#" class="pheasant-demure-button solid light hover icon round-corner">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button solid dark hover icon round-corner">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button solid light hover icon blink round-corner">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button solid dark hover icon blink round-corner">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button outline light">
  <span class="label">Standard</span>
</a>

<a href="#" class="pheasant-demure-button outline dark">
  <span class="label">Standard</span>
</a>

<a href="#" class="pheasant-demure-button outline light hover blink">
  <span class="label">Hover Blink</span>
</a>

<a href="#" class="pheasant-demure-button outline dark hover blink">
  <span class="label">Hover Blink</span>
</a>

<a href="#" class="pheasant-demure-button outline light hover icon">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button outline dark hover icon">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button outline light hover icon blink">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button outline dark hover icon blink">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button outline light round-corner">
  <span class="label">Standard</span>
</a>

<a href="#" class="pheasant-demure-button outline dark round-corner">
  <span class="label">Standard</span>
</a>

<a href="#" class="pheasant-demure-button outline light hover blink round-corner">
  <span class="label">Hover Blink</span>
</a>

<a href="#" class="pheasant-demure-button outline dark hover blink round-corner">
  <span class="label">Hover Blink</span>
</a>

<a href="#" class="pheasant-demure-button outline light hover icon round-corner">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button outline dark hover icon round-corner">
  <span class="label">Button Icon</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button outline light hover icon blink round-corner">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</a>

<a href="#" class="pheasant-demure-button outline dark hover icon blink round-corner">
  <span class="label">Blink Effect</span>
  <span class="material-icons icon">chevron_right</span>
</a>

Standard

Hover Blink

Button Icon chevron_right

Blink Effect chevron_right

Standard

Hover Blink

Button Icon chevron_right

Blink Effect chevron_right

Standard

Hover Blink

Button Icon chevron_right

Blink Effect chevron_right