CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Shihab Ullah
Shihab Ullah

Reputation: 73

Alignment issue and Bootstrap button modification

I have a custom design to make:

The current implementation looks like :

How can I make the first button named manedlig donation and enkel donation to have that arrow pointer using CSS? Also I am unable to make the same horizontal alignment and they look misaligned.

My code is:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- jQuery UI autocomplete CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
        integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

    <style>
        /* Overriding Styles */
        .radio-toolbar {
            margin: 10px 0px;
        }

        .radio-toolbar input[type="radio"] {
            opacity: 0;
            /* position: fixed; */
            width: 0;
        }

        .radio-toolbar label {
            display: inline-block;
            background-color: white;
            padding: 5px 22px;
            font-family: sans-serif, Arial;
            font-size: 16px;
            border: 1px solid #E7E7E7;
            border-radius: 0px;
        }

        .radio-toolbar label:hover {
            background-color: #E7E7E7;
        }

        /* .radio-toolbar input[type="radio"]:focus+label {
            border: 2px dashed #444;
        } */

        .radio-toolbar input[type="radio"]:checked+label {
            background-color: #C8951C;
            color: white;
            border: none;
        }

        #basic-addon2 {
            background-color: white;
        }

        input[type="text"] {
            text-align: center;
        }

        #amount::placeholder {

            /* Firefox, Chrome, Opera */
            text-align: center;
            margin-left: 20px !important;
        }

        input {
            border-radius: 0
        }

        .custom-btn {
            position: relative;
            display: inline-block;
            width: auto;
            height: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            min-width: 150px;
        }

        .custom-btn span {
            position: relative;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            transition: 0.3s;
        }

        .custom-btn-2::before {
            background-color: #C8951C;
            transition: 0.3s ease-out;
        }

        .custom-btn-2 span {
            color: #C8951C;
            border: 1px solid #C8951C;
            transition: 0.2s;
        }

        .custom-btn-2 span:hover {
            color: rgb(255, 255, 255);
            background-color: #C8951C;
            transition: 0.2s 0.1s;
        }

        .custom-btn.hover-opacity::before {
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
        }

        .custom-btn.hover-opacity:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body style="background-color: #fbf9f7;">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                <form id="form_submit">
                    <div class="radio-toolbar mb-5">
                        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
                        <label for="monthly">Månedlig donation</label>

                        <input type="radio" id="one-time" name="frekvens" value="one-time">
                        <label for="one-time">Enkel donation</label>
                    </div>
                    <div class="radio-toolbar" id="monthly-donation-block">
                        <input type="radio" id="amount-29" name="monthly-belob" value="29">
                        <label for="amount-29">29 DKK</label>

                        <input type="radio" id="amount-49" name="monthly-belob" value="49" checked>
                        <label for="amount-49">49 DKK</label>

                        <input type="radio" id="amount-79" name="monthly-belob" value="79">
                        <label for="amount-79">79 DKK</label>
                    </div>
                    <div class="radio-toolbar" id="one-time-donation-block" style="display: none;">
                        <input type="radio" id="amount-99" name="one-time-belob" value="99">
                        <label for="amount-99">99 DKK</label>

                        <input type="radio" id="amount-149" name="one-time-belob" value="149" checked>
                        <label for="amount-149">149 DKK</label>

                        <input type="radio" id="amount-199" name="one-time-belob" value="199">
                        <label for="amount-199">199 DKK</label>
                    </div>
                    <div class="input-group mb-5">
                        <input type="text" class="form-control num-only auto-ok" id="belob" placeholder="Valgfrit beløb"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">DKK</span>
                        <div id="belob-feedback" class="invalid-feedback">
                            Incorrect Number
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control num-only" id="phone" placeholder="Telefonnummer" required
                            maxlength="10">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="custom-btn custom-btn-2 hover-opacity">
                            <span>FORTSÆT</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<!-- These two are required unless jQuery & bootstrap is already included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
    crossorigin="anonymous"></script>
<!-- This is required for autocomplete api -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdn.dataforsyningen.dk/dawa/assets/dawa-autocomplete2/1.0.2/dawa-autocomplete2.min.js"></script>
<!-- this is required for debounce delay of input field -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
    integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
    integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ=="
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
</html>

(Font type can be ignored).

Upvotes: 1

Views: 107

Answers (3)

Yichz
Yichz

Reputation: 9681

you can add a ::after to create the pointer

      .radio-toolbar input[type="radio"]:checked+label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(
45deg);
      }

Also the alignment could be achieve with flex properties on the container:

see full code here:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo form</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <!-- jQuery UI autocomplete CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
        integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw=="
        crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Poppins" />

    <style>
        /* Overriding Styles */
        .radio-toolbar {
          margin: 10px 0px;
          display: flex;
        }

        .radio-toolbar input[type="radio"] {
            opacity: 0;
            /* position: fixed; */
            width: 0;
        }

        .radio-toolbar label {
            display: inline-block;
            background-color: white;
            padding: 5px 22px;
            font-family: sans-serif, Arial;
            font-size: 16px;
            border: 1px solid #E7E7E7;
            border-radius: 0px;
            flex:1;
            margin-right: 8px;
        }
      
      .radio-toolbar label:last-child {
        margin-right: 0;
      }

        .radio-toolbar label:hover {
            background-color: #E7E7E7;
        }

        /* .radio-toolbar input[type="radio"]:focus+label {
            border: 2px dashed #444;
        } */

        .radio-toolbar input[type="radio"]:checked+label {
            background-color: #C8951C;
            color: white;
            border: none;
            position: relative;
        }

      .radio-toolbar input[type="radio"]:checked+label.with-pointer::after {
        content: '';
        width: 16px;
        height: 16px;
        background: #C8951C;
        position: absolute;
        bottom: 0;
        left: 50%;
        z-index: -1;
        transform: translate(-50%, 8px) rotate(
45deg);
      }
      
     
        #basic-addon2 {
            background-color: white;
        }

        input[type="text"] {
            text-align: center;
        }

        #belob::placeholder {

            /* Firefox, Chrome, Opera */
            margin-left: -58px !important;
        }

        input {
            border-radius: 0
        }

        .custom-btn {
            position: relative;
            display: inline-block;
            width: auto;
            height: auto;
            background-color: transparent;
            border: none;
            cursor: pointer;
            min-width: 150px;
padding: 0px;
        }

        .custom-btn span {
            position: relative;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 20px;
            transition: 0.3s;
        }

        .custom-btn-2::before {
            background-color: #C8951C;
            transition: 0.3s ease-out;
        }

        .custom-btn-2 span {
            color: #C8951C;
            border: 1px solid #C8951C;
            transition: 0.2s;
        }

        .custom-btn-2 span:hover {
            color: rgb(255, 255, 255);
            background-color: #C8951C;
            transition: 0.2s 0.1s;
        }

        .custom-btn.hover-opacity::before {
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
        }

        .custom-btn.hover-opacity:hover::before {
            opacity: 1;
        }
    </style>
</head>

<body style="background-color: #fbf9f7;">
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-md-6 mx-auto mt-2">
                <form id="form_submit">
                    <div class="radio-toolbar mb-5">
                        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
                        <label for="monthly" class="with-pointer">Månedlig donation</label>

                        <input type="radio" id="one-time" name="frekvens" value="one-time">
                        <label for="one-time" class="with-pointer">Enkel donation</label>
                    </div>
                    <div class="radio-toolbar" id="monthly-donation-block">
                        <input type="radio" id="amount-29" name="monthly-belob" value="29">
                        <label for="amount-29">29 DKK</label>

                        <input type="radio" id="amount-49" name="monthly-belob" value="49" checked>
                        <label for="amount-49">49 DKK</label>

                        <input type="radio" id="amount-79" name="monthly-belob" value="79">
                        <label for="amount-79">79 DKK</label>
                    </div>
                    <div class="radio-toolbar" id="one-time-donation-block" style="display: none;">
                        <input type="radio" id="amount-99" name="one-time-belob" value="99">
                        <label for="amount-99">99 DKK</label>

                        <input type="radio" id="amount-149" name="one-time-belob" value="149" checked>
                        <label for="amount-149">149 DKK</label>

                        <input type="radio" id="amount-199" name="one-time-belob" value="199">
                        <label for="amount-199">199 DKK</label>
                    </div>
                    <div class="input-group mb-5">
                        <input type="text" class="form-control num-only auto-ok" id="belob" placeholder="Valgfrit beløb"
                            aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-text" id="basic-addon2">DKK</span>
                        <div id="belob-feedback" class="invalid-feedback">
                            Incorrect Number
                        </div>
                    </div>
                    <div class="mb-3">
                        <input type="text" class="form-control num-only" id="phone" placeholder="Telefonnummer" required
                            maxlength="10">
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="custom-btn custom-btn-2 hover-opacity">
                            <span>FORTSÆT</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<!-- These two are required unless jQuery & bootstrap is already included -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
    crossorigin="anonymous"></script>
<!-- This is required for autocomplete api -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
<script src="https://cdn.dataforsyningen.dk/dawa/assets/dawa-autocomplete2/1.0.2/dawa-autocomplete2.min.js"></script>
<!-- this is required for debounce delay of input field -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"
    integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ=="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
    integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ=="
    crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
</html>

Upvotes: 1

Saikat Roy
Saikat Roy

Reputation: 523

There may be a lot of solution for those requirements. I've made a partial example for the button design. you can check that out.

styles

    /* Overriding Styles */
.radio-toolbar {
  margin: 10px 0px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  /* position: fixed; */
  width: 0;
}

.radio-toolbar label {
  display: inline-block;
  background-color: white;
  padding: 5px 22px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 1px solid #E7E7E7;
  border-radius: 0px;
  position: relative;
  z-index: 5;
}

.radio-toolbar label:hover {
  background-color: #E7E7E7;
}

/* .radio-toolbar input[type="radio"]:focus+label {
border: 2px dashed #444;
} */

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #C8951C;
  color: white;
  border: none;
}
.btn-color{
  display: flex;
  justify-content: center;
}
.arrow{
  position: absolute;
  width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid #c8951c;
  z-index: 0;
}
<div class="radio-toolbar mb-5">
  <div class="row">
    <div class="btn-color">
        <input type="radio" id="monthly" name="frekvens" value="monthly" checked>
        <label for="monthly" class="button-month">
          Månedlig donation
        </label>
        <span class="arrow"></span>
    </div>
  </div>
</div>

https://codepen.io/njmsaikat/pen/gOXYzBe

Upvotes: 0

phucbm
phucbm

Reputation: 893

For the pointer arrow, you could have it by using CSS border:

button {position:relative; padding:10px; background:orange; color:#fff; border:none;}
button:before {
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%);
    width: 0;
    height: 0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:15px solid orange;
}
<button>Button</button>

I'm not sure what "horizontal alignment" you're talking about?

Upvotes: 0

Related Questions