10 best css button design



Your code creates a simple webpage with 10 buttons that have unique CSS designs. Below is a brief explanation of the key elements in your design:

Structure:

  • HTML Structure:
    • The page has a div with the class button_container, which contains an <h1> title and a series of 10 buttons, each represented by an anchor (<a>) tag.
    • Each button has a distinct class (btn-1, btn-2, ..., btn-10) to apply different CSS styles to each one.

CSS Styling:

  • General Styles:

    • You apply a universal box-sizing model (box-sizing: border-box) and reset margin and padding to ensure a clean layout.
    • A custom font (font1) is applied to the body using a font-face declaration for a specific typeface (assuming the "Rejouice-Headline.ttf" file is available).
    • The body has a dark background color (rgb(4, 4, 58)), and the buttons are designed to stand out with various colors, borders, and hover effects.

  • Button Styles:

    • btn-1: A solid blue background that darkens on hover.
    • btn-2: A green button with a border that turns green and transparent when hovered.
    • btn-3: A gradient background that changes direction on hover.
    • btn-4: A purple button that darkens on hover.
    • btn-5: An orange button with an animation effect where a "shine" slides across the button on hover.
    • btn-6: A red button with a border and color reversal effect on hover.
    • btn-7: A dark gray button with a shadow that intensifies on hover.
    • btn-8: A transparent button with an orange border that fills with color on hover.
    • btn-9: A green button with no border-radius and larger letter spacing, changing to a darker green on hover.
    • btn-10: A gradient background with an intense glow effect, and shadow changes on hover.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 Button Design</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
    }

    @font-face {
        font-family: font1;
        src: url("Rejouice-Headline.ttf");
    }

    body {
        background-color: rgb(4, 4, 58);
        width: 100%;
        height: 100vh;
        font-family: font1;
    }

    .button_container {
        width: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        flex-direction: column;
        gap: 50px;
        margin: 0 auto;
    }

    .button_container h1 {
        color: white;
    }

    a {
        position: relative;
        display: inline-block;
        padding: 15px 20px;
        text-transform: capitalize;
        letter-spacing: 2px;
        font-size: 1rem;
        color: white;
        margin: 10px 5px;
        transition: 0.4s ease-in-out;
        box-shadow: 0 0 5px #03c9f4,
            0 0 25px #03e9f4,
            0 0 50px #03e9f4,
            0 0 200px #03e9f4;

    }

    .btn-1 {
        background-color: #3498db;
    }

    .btn-1:hover {
        background-color: #2980b9;
    }

    .btn-2 {
        background-color: #2ecc71;
        border: 2px solid transparent;
        transition: 0.4s;
    }

    .btn-2:hover {
        background-color: transparent;
        border-color: #2ecc71;
        color: #2ecc71;
    }

    .btn-3 {
        background: linear-gradient(45deg, #f39c12, #e74c3c);
    }

    .btn-3:hover {
        background: linear-gradient(45deg, #e74c3c, #f39c12);
    }

    .btn-4 {
        background-color: #8e44ad;
        /* border-radius: 50px; */
    }

    .btn-4:hover {
        background-color: #732d91;
    }

    .btn-5 {
        background-color: #e67622;
        position: relative;
        overflow: hidden;
        top: 30px;
    }

    .btn-5::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 300px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.2);
        transition: 0.5s;
    }

    .btn-5:hover::before {
        left: 100%;
    }

    .btn-6 {
        background-color: #c0392b;
        border: 2px solid #c0392b;
        color: white;
    }

    .btn-6:hover {
        background-color: transparent;
        color: #c0392b;
    }

    .btn-7 {
        background-color: #34495e;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .btn-7:hover {
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
    }

    .btn-8 {
        background-color: transparent;
        border: 2px solid #d35400;
        color: #d35400;
        position: relative;
    }

    .btn-8:hover {
        background-color: #d35400;
        color: white;
    }

    .btn-9 {
        background-color: #16a085;
        border-radius: 0;
        letter-spacing: 4px;
    }

    .btn-9:hover {
        background-color: #149174;
    }

    .btn-10 {
        background: linear-gradient(45deg, #f1c40f, #e67e22);
        box-shadow: 0 0 5px #03c9f4,
            0 0 25px #03e9f4,
            0 0 50px #03e9f4,
            0 0 200px #03e9f4;
        position: relative;
    }

    .btn-10:hover {
        background: linear-gradient(45deg, #e67e22, #f1c40f);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }
</style>

<body>
    <div class="button_container">
        <h1>10 Css Button Design</h1>
        <div>
            <a href="#" class="btn-1">Button 1</a>
            <a href="#" class="btn-2">Button 2</a>
            <a href="#" class="btn-3">Button 3</a>
            <a href="#" class="btn-4">Button 4</a>
            <a href="#" class="btn-5">Button 5</a>
            <a href="#" class="btn-6">Button 6</a>
            <a href="#" class="btn-7">Button 7</a>
            <a href="#" class="btn-8">Button 8</a>
            <a href="#" class="btn-9">Button 9</a>
            <a href="#" class="btn-10">Button 10</a>
        </div>
    </div>
</body>

</html>


Improvements and Considerations:

  • Font File: Ensure that the Rejouice-Headline.ttf font file is accessible in the same directory as your HTML file, or else the font won't load.
  • Accessibility: Add aria-label or title attributes for better accessibility, so users with screen readers can understand the button functions.
  • Responsiveness: The design seems well-structured, but consider using @media queries to ensure the buttons adjust appropriately on different screen sizes.

Overall, this setup showcases a creative use of CSS for button effects with varied colors, hover animations, and shadows to create an engaging user experience.






Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more

Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

Image
  Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic. File Structure: index.html - The main structure of the app style.css - Custom styles (if needed) script.js - JavaScript logic for the app You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles. Features Breakdown: Login/Logout : The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen. To-Do Management : The user can add, edit, and delete items from the to-do list. Local Storage : All data is stored in the browser's local storage, so the data persists even after the page is refreshed. Tailwind CSS : The app uses Tailwind CSS to create a clean, responsive, and modern design. You can run this code by creating th...
Read more