Button Group
CODE
×
HTML
<div class='button-group'> <button class='btn btn-primary'>Who we are</button> <button class='btn btn-secondary'>GET IN TOUCH</button> </div>
CSS
@media (min-width: 576px) { .button-group button + button, .button-group .btn + .btn { margin-left: 24px !important; } } @media (max-width: 575px) { .button-group button + button, .button-group .btn + .btn { margin-top: 0px !important; } } button.btn.btn-primary { font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); font-size: var(--fs-l); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-width: var(--lw3); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); width:auto; letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); color: var(--fpb); background-color: var(--bsc2); border-color: var(--lsc2); margin-top: 38px; margin-bottom: 24px; padding-top: 16px; padding-right: 46px; padding-bottom: 16px; padding-left: 46px; } button.btn.btn-secondary { font-family: var(--headline-font-h2-und-kleiner-1); font-style: var(--headline-font-h2-und-kleiner-2); font-weight: var(--headline-font-h2-und-kleiner-3); font-size: var(--fs-l); border-top-left-radius: var(--br2-1); border-top-right-radius: var(--br2-2); border-bottom-left-radius: var(--br2-3); border-bottom-right-radius: var(--br2-4); border-width: var(--lw4); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); width:auto; letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); background-color:transparent; border-color: var(--lc7); color: var(--fsb); margin-top: 38px; margin-bottom: 24px; padding-top: 16px; padding-right: 46px; padding-bottom: 16px; padding-left: 46px; } button.btn.btn-primary:hover, button.btn.btn-primary:focus { border-color: var(--lsc1); background-color: var(--bsc1); color: var(--fsc2); } button.btn.btn-secondary:hover, button.btn.btn-secondary:focus { background-color: var(--bsc4); color: var(--fsc2); border-color: var(--lsc1); } @media screen and (max-width: 991px) { button.btn.btn-primary { font-size: var(--fs-m); } button.btn.btn-secondary { font-size: var(--fs-m); } } @media screen and (max-width: 575px) { button.btn.btn-primary { margin-top: 24px; } button.btn.btn-secondary { margin-top: 24px; } } @media screen and (max-width: 389px) { button.btn.btn-secondary { width: 100%; } }
JS
Button Group
Last Edit: Dec 8, 2023, 9:55am
×
Who we are
GET IN TOUCH