This guide shows how to customize the appearance of recorder components using simple CSS. You can customize buttons, cards, inputs, dropdowns, media players, waveforms, and dialogs.
What you can customize
You can restyle every recorder element using the following CSS classes:
Component | CSS Class | Description |
Primary Buttons |
| Start, Stop, Submit, Upload, Record again, etc. |
Secondary Buttons |
| Cancel, Back actions |
Card Containers |
| Wrappers for grouped content |
Input Fields |
| Text or password inputs |
Dropdowns |
| Custom select inputs |
Waveform |
| Audio waveform visualization |
Audio Player |
| Embedded audio playback controls |
Video Player |
| Video playback controls |
Dialogs |
| Confirmation or modal windows |
Titles |
| Title headings (different sizes for h1-h6) |
Description |
| Recorder Description Text |
How Custom CSS works
The recorder automatically detects and applies your custom CSS rules if you define them using the class names listed above.
You can override colors, typography, borders, padding, animation, and shadows.
You don’t need to use
!important; the recorder gives your custom classes higher priority.Only appearance changes — core functionality remains the same.
/* ================================================================
SPEAK RECORDER – CUSTOM BUTTON STYLES
This master block includes:
• Primary & Secondary button styles
• Hover, Focus, Active and Disabled states
• Responsive sizing (for mobile / desktop)
• spacing, and brand-style design
• Optional shadows and gradient backgrounds
================================================================ */
/* Title - Simple Example */
/* This styles the main recorder title (h3 heading level) */
/* Available classes: sp-custom-title-1 through sp-custom-title-6 for different heading sizes */
.sp-custom-title-3 {
color: #0F0F0F;
font-family: 'Poppins', sans-serif;
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 16px;
}
/* This styles the recorder description text that appears below the title */
.sp-custom-desc {
color: #666666;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
margin-bottom: 20px;
}
/* Primary Button - Simple Example */
.sp-custom-primary-btn {
background-color: #0F0F0F;
color: white;
border: none;
border-radius: 8px;
padding: 12px 24px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.sp-custom-primary-btn:hover {
background-color: #545454;
}
/* Secondary Button - Simple Example */
.sp-custom-secondary-btn {
background-color: transparent;
color: #0F0F0F;
border: 2px solid #0F0F0F;
border-radius: 8px;
padding: 10px 22px;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.sp-custom-secondary-btn:hover {
background-color: #FAFAFA;
}
/* Card - Simple Example */
.sp-custom-card {
background-color: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Input Field - Simple Example */
.sp-custom-input {
border: 1px solid #E0E0E0;
border-radius: 4px;
padding: 8px 12px;
background-color: white;
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #0F0F0F;
}
.sp-custom-input:focus {
border-color: #0F0F0F;
outline: 2px solid rgba(15, 15, 15, 0.2);
outline-offset: 2px;
}
/* Dropdown - Simple Example */
.sp-custom-dropdown {
border: 1px solid #E0E0E0;
border-radius: 4px;
background-color: white;
font-family: 'Poppins', sans-serif;
}
.sp-custom-dropdown:focus {
border-color: #0F0F0F;
outline: 2px solid rgba(15, 15, 15, 0.2);
outline-offset: 2px;
}
/* Waveform - Simple Example */
.sp-custom-waveform {
background-color: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 4px;
height: 80px;
width: 100%;
}
/* Audio Player - Simple Example */
.sp-custom-audio-player {
width: 100%;
height: 40px;
border-radius: 4px;
}
/* Video Player - Simple Example */
.sp-custom-video-player {
width: 100%;
height: auto;
border-radius: 8px;
background-color: #000000;
}
/* Dialog - Simple Example */
.sp-custom-dialog {
background-color: white;
border-radius: 8px;
padding: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
Best practices for writing your CSS
Use these guidelines to avoid common issues when creating your own styles.
Target the provided classes: Use the specific custom classes (`.sp-custom-primary-btn`, `.sp-custom-secondary-btn`, etc.) instead of very broad selectors like `button { … }`, so you only affect recorder components.
Test in light and dark themes: Choose colors with enough contrast so text remains readable on both light and dark backgrounds.
Always define hover and focus states: This improves clarity and keyboard accessibility.
Design clear disabled buttons: Disabled buttons should look different and clearly non-clickable.
Use transitions sparingly: Small transitions (0.2–0.3s) are usually enough and keep the interface feeling fast.
Avoid rules that break functionality: Do not hide components or block interactions.
Avoid rules that break functionality, like hiding buttons or blocking clicks:
/* Avoid this – it breaks the UI */
.sp-custom-primary-btn {
display: none;
pointer-events: none;
}
Troubleshooting your custom CSS
If your styles do not look right, try these checks:
Make sure the selector name is spelled exactly: `.sp-custom-primary-btn`, `.sp-custom-secondary-btn`, `.sp-custom-card`, `.sp-custom-input`, `.sp-custom-dropdown`, `.sp-custom-waveform`, `.sp-custom-audio-player`, `.sp-custom-video-player`, or `.sp-custom-dialog`.
Check for missing semicolons
;or braces}in your CSS.If some default styling still appears, try setting all related properties explicitly (background, border, padding, font, etc.) in your rule.
Refresh your page without cache (for example, Ctrl+Shift+R or Cmd+Shift+R) to be sure you see the latest changes.
If problems continue, share your CSS and a screenshot with support so they can help you adjust the rules without changing your integration.