Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
DropDown
DropDown Multi Select
Gallery
Pagination
Pop-Up
Progress Bar
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V

Responsive & Customizable Button

Seamless Navigation with Style

Our responsive accordion provides an elegant solution for organizing content and enhancing user experience. Designed to adapt to any screen size, our accordion ensures that your website remains intuitive and accessible, whether your audience is on a desktop, tablet, or smartphone.

Key Features:

  • Fully Responsive: Our Buttons automatically adjusts to different screen sizes, providing a smooth and consistent experience across all devices.
  • Easily Customizable: Tailor the appearance and behavior of the buttons to fit your brand's style. With extensive customization options, you can modify colors, fonts, width, and shape effortlessly.
  • Simple Integration: Integrating our buttons into your website is straightforward, with clean and well-documented code that makes setup a breeze.
  • Cross-Browser Compatibility: Our button is tested to work seamlessly across all major browsers, ensuring that your users get the best experience regardless of their preferred platform.


// Basic HTML Structure for Button

<button class='Bn'>Button</button>

Detailed Explanation Of HTML Structure and their classes.

👉 Class="Bn" : To Design Button, you just simple add Button tag with class name 'Bn' (which is generated form Button first and last letter that is 'B' and 'n'.

Example of Button with Border

Button Name Code Example
Theme Bordered 
<button class='Bn CrBdTt Br2 CrBrTe CrTe30Lt'>Button</button>
Red Bordered 
<button class='Bn CrBdTt Br2 CrBrRd CrRd30Lt'>Button</button>
Yellow Bordered 
<button class='Bn CrBdTt Br2 CrBrYw CrYw30Lt'>Button</button>
Orange Bordered 
<button class='Bn CrBdTt Br2 CrBrOe CrOe30Lt'>Button</button>
Blue Bordered 
<button class='Bn CrBdTt Br2 CrBrBe CrBe30Lt'>Button</button>
Green Bordered 
<button class='Bn CrBdTt Br2 CrBrGn CrGn30Lt'>Button</button>
Pink Bordered 
<button class='Bn CrBdTt Br2 CrBrPk CrPk30Lt'>Button</button>
Purple Bordered 
<button class='Bn CrBdTt Br2 CrBrPe CrPe30Lt'>Button</button>
Gray Bordered 
<button class='Bn CrBdTt Br2 CrBrGy CrGy30Lt'>Button</button>
Black Bordered 
<button class='Bn CrBdTt Br2 CrBrBk CrBk'>Button</button>

Example of Colorfull Button

Button Name Code Example
Theme Colored 
<button class='Bn CrBrTe CrBdTe CrWe'>Button</button>
Red Colored 
<button class='Bn CrBrRd CrBdRd CrWe'>Button</button>
Yellow Colored 
<button class='Bn CrBrYw CrBdYw CrWe'>Button</button>
Orange Colored 
<button class='Bn CrBrOe CrBdOe CrWe'>Button</button>
Blue Colored 
<button class='Bn CrBrBe CrBdBe CrWe'>Button</button>
Green Colored 
<button class='Bn CrBrGn CrBdGn CrWe'>Button</button>
Pink Colored 
<button class='Bn CrBrPk CrBdPk CrWe'>Button</button>
Purple Colored 
<button class='Bn CrBrPe CrBdPe CrWe'>Button</button>
Gray Colored 
<button class='Bn CrBrGy CrBdGy CrWe'>Button</button>
Black Colored 
<button class='Bn CrBrBk CrBdBk CrWe'>Button</button>

Example of Colorfull Button with Border

Button Name Code Example
Theme Colored with Border 
<button class='Bn Br2 CrBrTe CrBdTe80Lt CrTe30Lt'>Button</button>
Red Colored with Border 
<button class='Bn Br2 CrBrRd CrBdRd80Lt CrRd30Lt'>Button</button>
Yellow Colored with Border 
<button class='Bn Br2 CrBrYw CrBdYw80Lt CrYw30Lt'>Button</button>
Orange Colored with Border 
<button class='Bn Br2 CrBrOe CrBdOe80Lt CrOe30Lt'>Button</button>
Blue Colored with Border 
<button class='Bn Br2 CrBrBe CrBdBe80Lt CrBe30Lt'>Button</button>
Green Colored with Border 
<button class='Bn Br2 CrBrGn CrBdGn80Lt CrGn30Lt'>Button</button>
Pink Colored with Border 
<button class='Bn Br2 CrBrPk CrBdPk80Lt CrPk30Lt'>Button</button>
Purple Colored with Border 
<button class='Bn Br2 CrBrPe CrBdPe80Lt CrPe30Lt'>Button</button>
Gray Colored with Border 
<button class='Bn Br2 CrBrGy CrBdGy80Lt CrGy30Lt'>Button</button>

Example of Button With Font-Size

Button Name Code Example
Normal Size 
<button class='Bn FtSe10'>Button</button>
Heading Size 6 
<button class='Bn FtSe13'>Button</button>
Heading Size 5 
<button class='Bn FtSe16'>Button</button>
Heading Size 4 
<button class='Bn FtSe19'>Button</button>
Heading Size 3 
<button class='Bn FtSe22'>Button</button>
Heading Size 2 
<button class='Bn FtSe25'>Button</button>
Heading Size 1 
<button class='Bn FtSe28'>Button</button>
Title Sized 
<button class='Bn FtSe36'>Button</button>

" Note: You can set button font size as per your need from 1 to 100 "

Example of Button with Width

Button Name Code Example
25% Width Size 
<button class='Bn Wh25p FtSe10'>Button</button>
Normal Width Size 
<button class='Bn'>Button</button>
50% Width Size 
<button class='Bn Wh50p FtSe16'>Button</button>
75% Width Size 
<button class='Bn Wh75p FtSe19'>Button</button>
100% Width Size 
<button class='Bn Wh100p FtSe28'>Button</button>

" Note: You can set button width size as per your need from 1 to 100 "

Example of Rounded Button

Button Name Code Example
Normal Button Radius 
<button class='Bn'>Button</button>
10% Button Radius 
<button class='Bn BrRs10'>Button</button>
15% Button Radius 
<button class='Bn BrRs15'>Button</button>
20% Button Radius 
<button class='Bn BrRs20'>Button</button>
25% Button Radius 
<button class='Bn BrRs25'>Button</button>

" Note: You can set Border Radius as per your need from 1 to 50 "

Example of Button Shape

Button Name Code Example
Normal 
<button class='Bn'>Button</button>
Circle 
<button class='Bn Pg20 Ht10 Wh10 BrRs50'>Button</button>
Square 
<button class='Bn Pg20 Ht10 Wh10 BrRs20p'>Button</button>
Oval 
<button class='Bn BrRs50p'>Button</button>
Pill Left 
<button class='Bn BrTpLtRs50 BrBmLtRs50'>Button</button>
Pill Right 
<button class='Bn BrTpRtRs50 BrBmRtRs50'>Button</button>

Example of Text Button with Icon

Button Name Code Example
Mail 

    <button class='Bn FxCr Gp3 FtSe20 CrBrOe80Lt CrBdOe80Lt CrOe'> 
        <div class="CT-Email FtWt700"></div> 
        <div class="">Mail</div> 
    </button>
Facebook 

    <button class='Bn FxCr Gp3 FtSe20 CrBrBe40Lt CrBdBe40Lt CrWe'> 
        <div class="CT-FacebookSolid FtWt700"></div> 
        <div class="">Facebook</div> 
    </button>
Payment 

    <button class='Bn FxCr Gp3 FtSe20 CrBrGn40Lt CrBdGn40Lt CrWe'> 
        <div class="CT-PaymentReceive FtWt700"></div> 
        <div class="">Payment</div> 
    </button>
Delete 

    <button class='Bn FxCr Gp3 FtSe20 CrBrRd40Lt CrBdRd40Lt CrWe'> 
        <div class="CT-DeletePageSolid FtWt700"></div> 
        <div class="">Delete</div> 
    </button>
"Note: To Create more button with icons, you have to link icon library in your project."

                                <link href="~/cticons-v1.0/style.css" rel="stylesheet" />
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...