Button Code Snippets for Web Development

Primary Secondary Success

            
<!-- HTML -->
<button class="btn-primary">Primary</button>

<!-- CSS -->
<style>
.btn-primary {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
</style>
            
            Copy
        

Hover Me

            
<style>
.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s;
}
</style>
            
            Copy
        

Disabled

            
<button disabled>Disabled</button>

<style>
button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}
</style>
            
            Copy
        

⭐Star

            
<button style="padding: 10px 20px; background-color: #333; color: white;">
    <span style="margin-right: 8px;">⭐</span>Star
</button>
            
            Copy
        

Loading...

            
<style>
.loader {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>

<button style="padding: 10px 20px; position: relative;">
    <span class="loader"></span>
    Loading...
</button>
            
            Copy
        

Facebook Twitter Google

            
<button style="background-color: #1877f2; color: white; padding: 10px 20px;">Facebook</button>
<button style="background-color: #1da1f2; color: white; padding: 10px 20px;">Twitter</button>
<button style="background-color: #db4437; color: white; padding: 10px 20px;">Google</button>
            
            Copy