HTML Button With CSS Example With code

Rumman Ansari   Software Engineer   2024-02-06 08:21:45   21 Share
Subject Syllabus DetailsSubject Details Login to Open Video
☰ Table of Contents

Table of Content:

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 */
  }