Imagine walking into a store where every door is labeled "Click Here." You'd have no idea which door leads to the restroom, which one takes you to customer service, or which one is the exit. You'd either have to guess and potentially waste time, or you'd leave the store entirely out of frustration. This is exactly what happens to users when websites have poorly labeled buttons.
Button names are the words or phrases that tell users exactly what will happen when they click or tap a button. A good button name is like a clear, honest sign that eliminates guesswork and helps users move through your website with confidence. Instead of mysterious labels like "Click Here" or "Submit," effective button names use specific, action-oriented language like "Add to Cart," "Download Free Guide," or "Schedule Appointment."
Button names aren't just helpful—they're essential for making your website usable by everyone. Here's why they matter so much:
Beyond accessibility, clear button names improve usability for everyone. When users can quickly understand what each button does, they move through your website more efficiently, make fewer mistakes, and feel more confident in their interactions.
Unclear button labels break user trust. When people can't predict what will happen after clicking a button, they become hesitant to interact with your site. This hesitation can be the difference between a completed purchase and an abandoned cart, or between a successful sign-up and a lost potential customer.
Even well-designed websites often have button naming issues that create unnecessary confusion:
"Click Here" tells users how to interact with the button, but not what it will do.
<!-- Problematic: Doesn't explain the action -->
<p>To download our free guide, <a href="/guide.pdf">click here</a>.</p>
<button onclick="submitForm()">Click Here</button>
<!-- Better: Describes the actual action -->
<p>Download our <a href="/guide.pdf">free marketing guide</a>.</p>
<button onclick="submitForm()">Submit Application</button>Words like "Submit," "Go," or "OK" don't provide context about what's being submitted or where you're going.
<!-- Problematic: Too generic -->
<button type="submit">Submit</button>
<button onclick="proceed()">Go</button>
<button onclick="closeDialog()">OK</button>
<!-- Better: Specific and contextual -->
<button type="submit">Create Account</button>
<button onclick="proceed()">Continue to Payment</button>
<button onclick="closeDialog()">Save Changes</button>Buttons that rely solely on icons can be ambiguous, especially since icon meanings vary across cultures and contexts.
<!-- Problematic: Icon meaning unclear -->
<button onclick="saveItem()">
<i class="icon-heart"></i>
</button>
<button onclick="shareItem()">
<i class="icon-arrow"></i>
</button>
<!-- Better: Icons with clear text labels -->
<button onclick="saveItem()">
<i class="icon-heart"></i>
Add to Favorites
</button>
<button onclick="shareItem()">
<i class="icon-share"></i>
Share Article
</button>
<!-- Alternative: Hidden text for screen readers -->
<button onclick="saveItem()" aria-label="Add to favorites">
<i class="icon-heart"></i>
<span class="visually-hidden">Add to Favorites</span>
</button>Buttons that don't clearly communicate the value or outcome of the action.
<!-- Problematic: Unclear benefit -->
<button onclick="signup()">Sign Up</button>
<button onclick="download()">Download</button>
<button onclick="learn()">Learn More</button>
<!-- Better: Clear value proposition -->
<button onclick="signup()">Start Free Trial</button>
<button onclick="download()">Download Free Template</button>
<button onclick="learn()">View Pricing Plans</button>Button labels that only make sense when you can see surrounding content.
<!-- Problematic: Requires context to understand -->
<div class="product-card">
<h3>Wireless Headphones</h3>
<p>$99.99</p>
<button onclick="addToCart(123)">Add</button>
<button onclick="viewProduct(123)">View</button>
</div>
<!-- Better: Self-explanatory labels -->
<div class="product-card">
<h3>Wireless Headphones</h3>
<p>$99.99</p>
<button onclick="addToCart(123)">Add to Cart</button>
<button onclick="viewProduct(123)">View Details</button>
</div>Creating clear, useful button labels follows several key principles:
Begin button labels with strong action words that clearly indicate what will happen.
<!-- Effective action verbs for different contexts -->
<button onclick="purchase()">Buy Now</button>
<button onclick="subscribe()">Subscribe to Newsletter</button>
<button onclick="downloadFile()">Download Report</button>
<button onclick="bookAppointment()">Schedule Consultation</button>
<button onclick="createAccount()">Create Free Account</button>
<button onclick="updateProfile()">Save Profile Changes</button>
<button onclick="deleteItem()">Delete Photo</button>
<button onclick="contactUs()">Send Message</button>Good action verbs include: Buy, Download, Subscribe, Create, Save, Delete, Send, Schedule, View, Edit, Share, and Export.
Don't just say what action will happen—specify what it will affect or what the user will get.
<!-- Action + Object combinations -->
<button onclick="addToCart()">Add to Cart</button>
<button onclick="downloadGuide()">Download Marketing Guide</button>
<button onclick="viewPricing()">View Pricing Options</button>
<button onclick="startTrial()">Start 14-Day Free Trial</button>
<button onclick="saveDocument()">Save Document</button>
<button onclick="sharePost()">Share This Post</button>
<button onclick="editProfile()">Edit Your Profile</button>
<button onclick="cancelOrder()">Cancel This Order</button>When buttons take users to different pages or sections, clearly indicate the destination.
<!-- Clear navigation labels -->
<button onclick="goToCheckout()">Continue to Checkout</button>
<button onclick="viewAllProducts()">Browse All Products</button>
<button onclick="goToAccount()">Go to My Account</button>
<button onclick="returnToShopping()">Continue Shopping</button>
<button onclick="viewCart()">View Shopping Cart</button>
<button onclick="goToSupport()">Contact Support</button>Choose words that your users already understand and expect to see.
<!-- Use familiar terms your users expect -->
<!-- E-commerce -->
<button onclick="addToCart()">Add to Cart</button>
<button onclick="checkout()">Checkout</button>
<button onclick="wishlist()">Add to Wishlist</button>
<!-- Forms -->
<button type="submit">Submit Application</button>
<button onclick="saveAsDraft()">Save as Draft</button>
<button onclick="previewForm()">Preview Before Sending</button>
<!-- Account Management -->
<button onclick="signIn()">Sign In</button>
<button onclick="createAccount()">Create Account</button>
<button onclick="resetPassword()">Reset Password</button>Primary buttons can have longer, more descriptive labels, while secondary buttons might be more concise.
<!-- Primary action: More descriptive -->
<button class="primary-button" onclick="subscribe()">
Get Weekly Marketing Tips
</button>
<!-- Secondary actions: Concise but clear -->
<button class="secondary-button" onclick="skipStep()">Skip</button>
<button class="secondary-button" onclick="goBack()">Back</button>
<!-- Contextual buttons in forms -->
<form>
<input type="email" placeholder="Enter your email">
<button type="submit" class="primary">Start Free Trial</button>
<button type="button" class="secondary" onclick="learnMore()">
Learn More About Features
</button>
</form>For actions that delete or remove content, be extra clear about what will be affected.
<!-- Clear destructive action labels -->
<button onclick="deleteAccount()" class="destructive">
Delete My Account
</button>
<button onclick="removeFromCart()" class="destructive">
Remove from Cart
</button>
<button onclick="cancelSubscription()" class="destructive">
Cancel Subscription
</button>
<!-- Confirmation dialogs for destructive actions -->
<div role="dialog" aria-labelledby="confirm-delete">
<h2 id="confirm-delete">Confirm Account Deletion</h2>
<p>This action cannot be undone. All your data will be permanently deleted.</p>
<button onclick="confirmDelete()" class="destructive">
Yes, Delete My Account
</button>
<button onclick="cancelDelete()" class="secondary">
Cancel, Keep My Account
</button>
</div>Different button types require specific approaches to labeling:
Instead of generic "Submit," describe what happens when the form is submitted.
<!-- Contact forms -->
<button type="submit">Send Message</button>
<button type="submit">Request Information</button>
<!-- Registration forms -->
<button type="submit">Create My Account</button>
<button type="submit">Join the Community</button>
<!-- Application forms -->
<button type="submit">Submit Application</button>
<button type="submit">Apply for Position</button>
<!-- Newsletter forms -->
<button type="submit">Subscribe to Updates</button>
<button type="submit">Get Weekly Tips</button>For buttons that switch between states, make the current state and available action clear.
<!-- Toggle buttons that show current state -->
<button onclick="toggleMute()" aria-pressed="false">
Unmute Audio
</button>
<button onclick="toggleMute()" aria-pressed="true">
Mute Audio
</button>
<!-- Follow/Unfollow pattern -->
<button onclick="followUser()" class="follow-btn">
Follow @username
</button>
<button onclick="unfollowUser()" class="unfollow-btn">
Following @username
</button>
<!-- Show/Hide content -->
<button onclick="toggleDetails()" aria-expanded="false">
Show Details
</button>
<button onclick="toggleDetails()" aria-expanded="true">
Hide Details
</button>Clearly indicate when buttons will download files or open external sites.
<!-- Download buttons -->
<a href="/report.pdf" download>
Download Annual Report (PDF)
</a>
<button onclick="downloadTemplate()">
Download Excel Template
</button>
<!-- External link buttons -->
<a href="https://external-site.com" target="_blank" rel="noopener">
Visit Our Partner Site
<span class="visually-hidden">(opens in new tab)</span>
</a>
<button onclick="openVideoPlayer()">
Watch on YouTube
<span class="visually-hidden">(opens in new tab)</span>
</button>Make it clear which platform users will share to and what they'll be sharing.
<!-- Social sharing buttons -->
<button onclick="shareToTwitter()">
Share on Twitter
</button>
<button onclick="shareToFacebook()">
Share on Facebook
</button>
<button onclick="shareToLinkedIn()">
Share on LinkedIn
</button>
<button onclick="copyLink()">
Copy Link to Article
</button>Sometimes visual design constraints require creative approaches to ensure buttons remain accessible:
When space is limited and you must use icon-only buttons, provide clear text alternatives.
<!-- Icon buttons with aria-label -->
<button onclick="editPost()" aria-label="Edit this post">
<i class="icon-edit"></i>
</button>
<button onclick="deletePost()" aria-label="Delete this post">
<i class="icon-trash"></i>
</button>
<button onclick="sharePost()" aria-label="Share this post">
<i class="icon-share"></i>
</button>
<!-- Alternative: Visually hidden text -->
<button onclick="editPost()">
<i class="icon-edit"></i>
<span class="visually-hidden">Edit this post</span>
</button>Provide additional context for buttons when the label alone isn't sufficient.
<!-- Button with additional context -->
<button onclick="deleteItem()"
aria-describedby="delete-warning">
Delete Account
</button>
<p id="delete-warning" class="warning-text">
This action cannot be undone and will permanently remove all your data.
</p>
<!-- Form button with helpful context -->
<button type="submit"
aria-describedby="submit-help">
Submit Application
</button>
<p id="submit-help" class="help-text">
You'll receive a confirmation email within 24 hours.
</p>Update button labels dynamically to reflect current state or provide feedback.
<!-- JavaScript for dynamic button labels -->
<button id="save-button" onclick="saveDocument()">
Save Document
</button>
<script>
function saveDocument() {
const button = document.getElementById('save-button');
// Show loading state
button.textContent = 'Saving...';
button.disabled = true;
// Simulate save operation
setTimeout(() => {
button.textContent = 'Saved Successfully';
// Reset after 2 seconds
setTimeout(() => {
button.textContent = 'Save Document';
button.disabled = false;
}, 2000);
}, 1000);
}
</script>
<!-- Toggle button that updates its label -->
<button id="newsletter-toggle" onclick="toggleNewsletter()">
Subscribe to Newsletter
</button>
<script>
function toggleNewsletter() {
const button = document.getElementById('newsletter-toggle');
const isSubscribed = button.textContent.includes('Unsubscribe');
if (isSubscribed) {
button.textContent = 'Subscribe to Newsletter';
} else {
button.textContent = 'Unsubscribe from Newsletter';
}
}
</script>Regular testing ensures your button labels are clear and helpful for all users:
The most valuable test is often the simplest: read your button labels aloud to someone who's never seen your website. If they can't guess what each button does, your labels need work.
Investing in clear, descriptive button labels delivers measurable business benefits:
Companies that have improved their button labeling often see immediate improvements in user engagement and task completion rates, demonstrating that this seemingly small change can have significant impact.
Different industries benefit from tailored approaches to button labeling:
In each case, button labels should reflect the specific context, user needs, and communication style appropriate for the industry and audience.
Button names might seem like a small detail in web design, but they're actually one of the most important elements for creating inclusive, usable websites. Every button label is an opportunity to guide users clearly toward their goals, reduce confusion, and build confidence in your interface.
The principle behind effective button naming is simple: treat every button label as a promise to your users. When you write "Download Free Guide," you're promising that clicking will start a download of a guide that won't cost anything. When you write "Add to Cart," you're promising that the item will be added to their shopping cart. Keeping these promises builds trust and creates smooth user experiences.
What makes button naming particularly important for accessibility is that many users can't rely on visual context clues to understand what buttons do. Screen reader users, people using voice commands, and those navigating with keyboards all depend on button text to understand their options. When button labels are clear and descriptive, these users can navigate your site just as efficiently as anyone else.
The beauty of good button labeling is that it benefits everyone. When you write clear, specific button labels for accessibility, you're also creating a better experience for all users—from busy executives quickly scanning options to elderly users who appreciate clear communication to international visitors learning your language.
Greadme's easy-to-use tools can help you identify buttons with unclear or missing labels on your website, and provide simple guidance for writing better, more accessible button text—even if you're not technically minded.
Check Your Website's Button Labels Today