bootstrap button form

PHOTO EMBED

Fri Nov 01 2024 13:55:00 GMT+0000 (Coordinated Universal Time)

Saved by @abhigna 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customized Bootstrap Theme</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Custom Theme Colors */
        :root {
            --primary-color: #4CAF50; /* Green */
            --secondary-color: #FF5722; /* Orange */
        }
        body {
            background-color: #f8f9fa;
        }
        .btn-custom {
            background-color: var(--primary-color);
            color: white;
            border-radius: 30px;
        }
        .btn-custom:hover {
            background-color: var(--secondary-color);
        }
        .form-control-custom {
            border: 2px solid var(--primary-color);
            border-radius: 10px;
        }
        .form-control-custom:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 5px var(--secondary-color);
        }
        h1, h2 {
            color: var(--primary-color);
        }
    </style>
</head>
<body>

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand Logo</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

<div class="container mt-5">
    <h1>Welcome!</h1>
    <button class="btn btn-custom">Get Started</button>

    <h2 class="mt-5">Sign Up</h2>
    <form>
        <input type="text" class="form-control form-control-custom" placeholder="Name">
        <input type="email" class="form-control form-control-custom mt-3" placeholder="Email">
        <input type="password" class="form-control form-control-custom mt-3" placeholder="Password">
        <button type="submit" class="btn btn-custom mt-3">Submit</button>
    </form>
</div>

<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>
content_copyCOPY