Skip to content

Instantly share code, notes, and snippets.

@momin-riyadh

momin-riyadh/feedback-button.html

Last active July 30, 2025 04:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save momin-riyadh/1036c6140d756a22db73ce2dbfe76430 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save momin-riyadh/1036c6140d756a22db73ce2dbfe76430 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. momin-riyadh revised this gist Jul 30, 2025. 1 changed file with 7 additions and 9 deletions.
    16 changes: 7 additions & 9 deletions feedback-button.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,8 +19,8 @@
    margin: 0 auto;
    }

    .feedback-button-container input[type="button"] {
    padding: 12px 24px;
    .feedback-button-container button[type="button"] {
    padding: 8px 16px;
    font-size: 16px;
    border: 2px solid #d25d73;
    background-color: #d25d73;
    @@ -30,13 +30,13 @@
    transition: all 0.3s ease;
    }

    .feedback-button-container input[type="button"]:hover {
    .feedback-button-container button[type="button"]:hover {
    background-color: #d25d73;
    border-color: #d25d73;
    transform: translateY(-2px);
    }

    .feedback-button-container input[type="button"]:active {
    .feedback-button-container button[type="button"]:active {
    transform: translateY(0);
    }

    @@ -51,11 +51,9 @@
    <h1>Feedback</h1>

    <div class="feedback-button-container">
    <input type="button" value="Good" onclick="alert('Button 1 clicked!')">
    <input type="button" value="Better" onclick="alert('Button 2 clicked!')">
    <input type="button" value="Beautiful" onclick="alert('Button 3 clicked!')">
    <input type="button" value="Awesome" onclick="alert('Button 4 clicked!')">
    <input type="button" value="Excellent" onclick="alert('Button 5 clicked!')">
    <button type="button" onclick="alert('Button 3 clicked!')">Beautiful</button>
    <button type="button" onclick="alert('Button 4 clicked!')">Awesome</button>
    <button type="button" onclick="alert('Button 5 clicked!')">Excellent</button>
    </div>

    <script>
  2. momin-riyadh created this gist Jul 30, 2025.
    66 changes: 66 additions & 0 deletions feedback-button.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Five Input Buttons</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f0f0f0;
    }

    .feedback-button-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    max-width: 300px;
    margin: 0 auto;
    }

    .feedback-button-container input[type="button"] {
    padding: 12px 24px;
    font-size: 16px;
    border: 2px solid #d25d73;
    background-color: #d25d73;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    }

    .feedback-button-container input[type="button"]:hover {
    background-color: #d25d73;
    border-color: #d25d73;
    transform: translateY(-2px);
    }

    .feedback-button-container input[type="button"]:active {
    transform: translateY(0);
    }

    h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    }
    </style>
    </head>
    <body>
    <h1>Feedback</h1>

    <div class="feedback-button-container">
    <input type="button" value="Good" onclick="alert('Button 1 clicked!')">
    <input type="button" value="Better" onclick="alert('Button 2 clicked!')">
    <input type="button" value="Beautiful" onclick="alert('Button 3 clicked!')">
    <input type="button" value="Awesome" onclick="alert('Button 4 clicked!')">
    <input type="button" value="Excellent" onclick="alert('Button 5 clicked!')">
    </div>

    <script>
    // Additional JavaScript functionality if needed
    console.log('Five input buttons loaded successfully!');
    </script>
    </body>
    </html>