🠄 Back

🔘 Button Designer Studio

Complete User Guide & Tutorial

1. What Is This App?

Button Designer Studio is a live button customization tool. It allows users to design a button visually and instantly generate CSS code for the button.

As you change settings in the sidebar, the preview button updates automatically in real time.

Illustration — App Layout

Sidebar Controls

Button Text
Background Color
Padding
Border Radius

Live Preview

The button updates instantly whenever a setting changes.

2. Understanding the Sidebar Controls

Button Text

Changes the text displayed on the button.

Example:
  • "Click Me"
  • "Submit"
  • "Download"

Background Color

Changes the button background color using a color picker.

Text Color

Changes the text color displayed on the button.

Padding

Controls the spacing inside the button.

Illustration — Padding

Compact button

Large button

Border Radius

Controls how rounded the corners of the button are.

3. Shadow Controls

The app allows full customization of button shadows.

Illustration — Shadow Effects

4. Hover & Active Effects

Hover translateY

Moves the button vertically when the mouse hovers over it.

The button moves downward when hovered.

Active Scale

Controls how much the button shrinks when clicked.

Clicking the button creates a press animation.

5. Generated CSS Output

The textarea automatically displays the generated CSS code.

You can copy this CSS and use it in your own websites or projects.

.custom-button { background: #007BFF; color: #ffffff; padding: 10px 20px; border-radius: 4px; box-shadow: 0px 2px 4px 0px #000000; transition: all 200ms ease; } .custom-button:hover { transform: translateY(+4px); } .custom-button:active { transform: scale(0.95); }

6. How the JavaScript Works

Step 1 — Read Inputs

JavaScript first grabs all form controls using document.getElementById().

const controls = { txt: document.getElementById('txt'), bg: document.getElementById('bg') };

Step 2 — Build CSS

The buildCSS() function generates CSS code as text.

Step 3 — Apply Styles

The preview button updates immediately using inline styles.

Step 4 — Dynamic Style Injection

A new <style> tag is injected into the page so hover and active animations work correctly.

styleTag.textContent = css;

7. Features Summary