• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

Varun Shrivastava's Blog

Be My Aficionado

  • home
  • sitemaps

Features

Buttons

Default Button Outline Button Rounded Button Icon Button
 
Small Button Small Outline Button Small Rounded Button Small Icon Button
<a href="#" class="button">Default Button</a>
<a href="#" class="button outline">Outline Button</a>
<a href="#" class="button rounded">Rounded Button</a>
<a href="#" class="button fa fa-external-link-alt">Icon Button</a>
<a href="#" class="button small">Small Button</a>
<a href="#" class="button small outline">Small Outline Button</a>
<a href="#" class="button small rounded">Small Rounded Button</a>
<a href="#" class="button small fa fa-external-link-alt icon-right">Small Icon Button</a>

Icons

Font Awesome 5 icons https://fontawesome.com/icons (requires Icon Widget plugin).

<i class="fa fa-star fa-sm"></i>
<i class="fa fa-star fa-lg"></i>
<i class="fa fa-star fa-2x"></i>
<i class="fa fa-star fa-3x"></i>
<i class="fa fa-star fa-4x"></i>

Modal

Modal popup

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque venenatis augue eget lacinia.

<button onclick="show('modal')">Show Modal</button>

<div class="modal">
    <h3>Modal popup</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque venenatis augue eget lacinia.</p>
    <button onclick="hide('modal')">Close Modal</button>
    <button class="close" onclick="hide('modal')">Close Modal</button>
</div>

Boxes

This is a box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque venenatis augue eget lacinia.

<div class="box">
    <h6>This is a box title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque venenatis augue eget lacinia.</p>
</div>

Notice

Default
Success
Info
Warning
Error
<div class="notice">Default <button class="close alignright" onclick="hide('notice')"></button></div>
<div class="notice-success">Success <button class="close alignright" onclick="hide('notice-success')"></button></div>
<div class="notice-info">Info <button class="close alignright" onclick="hide('notice-info')"></button></div>
<div class="notice-warning">Warning <button class="close alignright" onclick="hide('notice-warning')"></button></div>
<div class="notice-error">Error <button class="close alignright" onclick="hide('notice-error')"></button></div>

Colors

Blue
Indigo
Purple
Pink
Red
Orange
Yellow
Green
Teal
Cyan
100
200
300
400
500
600
700
800
900
Black
<div class="palette">
<div class="has-blue-background-color">Blue</div>
<div class="has-indigo-background-color">Indigo</div>
<div class="has-purple-background-color">Purple</div>
<div class="has-pink-background-color">Pink</div>
<div class="has-red-background-color">Red</div>
<div class="has-orange-background-color">Orange</div>
<div class="has-yellow-background-color">Yellow</div>
<div class="has-green-background-color">Green</div>
<div class="has-teal-background-color">Teal</div>
<div class="has-cyan-background-color">Cyan</div>
<div class="has-gray-100-background-color">100</div>
<div class="has-gray-200-background-color">200</div>
<div class="has-gray-300-background-color">300</div>
<div class="has-gray-400-background-color">400</div>
<div class="has-gray-500-background-color">500</div>
<div class="has-gray-600-background-color">600</div>
<div class="has-gray-700-background-color">700</div>
<div class="has-gray-800-background-color">800</div>
<div class="has-gray-900-background-color">900</div>
<div class="has-black-background-color">Black</div>
</div>

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 105 other subscribers

Popular Posts

Trending

  • Simple Shopping Cart in JAVA using Collections
  • Being Selfish Is Good But Not At The Cost Of Someone's Happiness

Featured Posts

League Of Legends Is My New Hobby

Can A Man Live Alone?

Christmas Time!!!

Revisiting Algorithms

Thinking Of Starting Algorithms And Problem Solving

Categories

  • Blogging
  • Cooking
  • Fashion
  • My Journal
  • Programming
  • Technology
  • Travelling

RSS feed RSS - Posts

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in