Laravel

raunz
peep

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Circular Action Buttons</title>
    <style>
        .button, .link-button {
            padding: 15px 15px;
            margin: 10px;
            border: none;
            color: white;
            background-color: #FFFF00; /* Yellow color */
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            border-radius: 50%; /* Makes the buttons circular */
            cursor: pointer;
            width: 60px; /* Fixed width */
            height: 60px; /* Fixed height */
            line-height: 30px; /* Centers the text vertically */
            vertical-align: middle;
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
        }
        .spacer {
            height: 20px; /* Height of each empty row */
        }
        .red-line {
            width: 100%;
            height: 2px;
            background-color: red;
            margin-top: 40px; /* Space above the red line */
        }
    </style>
    <script>
        function showMessage() {
            alert("Well done");
        }

function playClapping() {
            var audio = new Audio('clapping.mp3'); // Path to clapping sound
            audio.play();
        }

function takeScreenshot() {
            // Screenshot functionality would require a library or framework not supported here
            alert("Screenshot functionality is not available in this environment.");
        }
    </script>
</head>
<body>
    <a href="https://www.google.com" target="_blank" class="button link-button">3</a>
    <button class="button" onclick="showMessage()">5</button>
    <button class="button" onclick="playClapping()">10</button>
    <button class="button" onclick="takeScreenshot()">Custom</button>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="red-line"></div>
</body>
</html>

Circular Action Buttons 3

Cow-Shaped Button