Table of Contents

    HTML Button With CSS Example With code


    HTML Button With CSS Example With code

    File: index.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css"> <!--  Link to your CSS file -->
        <title>HTML Button Example</title>
    </head>
    <body>
        <button type="button" id="myButton" class="important-button" data-action="submit-form" onclick="alert('Button clicked!')"> Click me</button>
    </body>
    </html>
    
    File: styles.css
    
    /* styles.css */
    
    /* Define the color for the button */
    .important-button {
        background-color: #3498db; /* Set your desired color */
        color: #ffffff; /* Set text color */
        padding: 10px 20px; /* Optional: Add padding for better styling */
        border: none; /* Optional: Remove border */
        border-radius: 5px; /* Optional: Add border-radius for rounded corners */
        cursor: pointer; /* Optional: Change cursor on hover */
      }
      
      /* Optional: Add hover effect */
      .important-button:hover {
        background-color: #2980b9; /* Change color on hover */
      }