CSS Tutorial

CSS Buttons Example

Last modified on: October 31, 2024

<h3>CSS Buttons Overview</h3>
<p>CSS buttons are styled HTML <code>&lt;button&gt;</code>, <code>&lt;input&gt;</code>, or <code>&lt;a&gt;</code> elements used to create visually appealing, clickable components for web applications. Customizing buttons with CSS enhances user interactions, providing a more engaging and accessible experience.</p>
<h3>Basic Button Styling</h3>
<p>Here&rsquo;s a simple way to create a button with basic styling:</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;button class="basic-button"&gt;Click Me&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.basic-button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
</code></pre>
</div>
</div>
</div>
</div>
<h3>CSS Hover Effects</h3>
<p>Adding a hover effect provides feedback when the user interacts with the button.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.basic-button:hover {
    background-color: #0056b3;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Here, the button color changes to a darker blue on hover, indicating interactivity.</p>
<hr />
<h3>Adding Transitions to Buttons</h3>
<p>CSS transitions smooth out the effect changes, making interactions more visually pleasing.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.basic-button {
    transition: background-color 0.3s ease;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Now, the button&rsquo;s color change on hover occurs gradually over 0.3 seconds.</p>
<hr />
<h3>Creating Rounded and Circle Buttons</h3>
<p>To make rounded and circular buttons, use <code>border-radius</code>.</p>
<p><strong>Rounded Button:</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.rounded-button {
    padding: 10px 20px;
    border-radius: 20px;
}
</code></pre>
</div>
</div>
</div>
</div>
<p><strong>Circle Button:</strong></p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.circle-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Outlined Button</h3>
<p>Outlined buttons are a popular choice for a minimal look.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.outlined-button {
    padding: 10px 20px;
    color: #007bff;
    background-color: transparent;
    border: 2px solid #007bff;
    transition: all 0.3s ease;
}

.outlined-button:hover {
    color: #fff;
    background-color: #007bff;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Here, the button starts as outlined and fills with color when hovered over.</p>
<hr />
<h3>Adding Button Shadows</h3>
<p>Shadows can make buttons appear more clickable and prominent.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.shadow-button {
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

.shadow-button:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}
</code></pre>
</div>
</div>
</div>
</div>
<p>The shadow deepens on hover, making the button look slightly elevated.</p>
<hr />
<h3>Animated Buttons</h3>
<p>CSS animations can add dynamic styles to buttons, making interactions memorable.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.animated-button {
    padding: 10px 20px;
    color: #fff;
    background-color: #6f42c1;
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.animated-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: left 0.5s ease;
}

.animated-button:hover::before {
    left: 0;
}
</code></pre>
</div>
</div>
</div>
</div>
<p>The <code>::before</code> pseudo-element creates an animated overlay that slides in when the button is hovered over.</p>
<hr />
<h3>Full Example: Styled CSS Button</h3>
<p>This example combines several techniques to create an interactive, modern button style.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;button class="fancy-button"&gt;Explore&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>.fancy-button {
    padding: 12px 24px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.fancy-button:hover {
    background-color: #0056b3;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
}
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Conclusion</h3>
<p>CSS allows you to style buttons with endless possibilities. Experimenting with properties like color, shadows, animations, and transitions can transform simple buttons into interactive elements that enhance your website's user experience.</p>

Web Technology View More