Buttons
Share on Instagram
CODE
×
HTML
<a class='share share-instagram' href='#' title='Instagram' rel='noopener noreferrer' target='_blank'><svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 512 512"> <circle class="st0" cx="255" cy="255" r="255" transform="translate(2)" /> <path class="st1" d="M90,0C65.55,0,62.5.112,52.9.54,43.313.99,36.787,2.5,31.05,4.725A44.074,44.074,0,0,0,15.1,15.1,43.913,43.913,0,0,0,4.725,31.05C2.5,36.787.982,43.312.54,52.9S0,65.55,0,90s.112,27.5.54,37.1c.45,9.578,1.957,16.11,4.185,21.848A44.137,44.137,0,0,0,15.1,164.895a44.011,44.011,0,0,0,15.945,10.38c5.745,2.22,12.27,3.742,21.847,4.185,9.6.45,12.652.54,37.1.54s27.5-.113,37.1-.54c9.578-.45,16.11-1.965,21.848-4.185a46,46,0,0,0,26.325-26.325c2.22-5.738,3.742-12.27,4.185-21.848.45-9.6.54-12.653.54-37.1s-.113-27.5-.54-37.1c-.45-9.578-1.965-16.118-4.185-21.848A44.172,44.172,0,0,0,164.895,15.1,43.851,43.851,0,0,0,148.95,4.725C143.212,2.5,136.68.982,127.1.54,117.5.09,114.45,0,90,0Zm0,16.2c24.022,0,26.888.12,36.375.532,8.775.413,13.537,1.868,16.7,3.112a29.617,29.617,0,0,1,17.085,17.077c1.23,3.165,2.7,7.927,3.1,16.7.427,9.495.525,12.345.525,36.375s-.112,26.888-.555,36.375c-.457,8.775-1.92,13.537-3.158,16.7a28.576,28.576,0,0,1-6.742,10.365,28.078,28.078,0,0,1-10.35,6.72c-3.15,1.23-7.988,2.7-16.763,3.1-9.555.427-12.368.525-36.442.525s-26.9-.112-36.443-.555c-8.782-.457-13.62-1.92-16.77-3.158A27.871,27.871,0,0,1,26.22,153.33a27.328,27.328,0,0,1-6.75-10.35c-1.237-3.15-2.692-7.988-3.15-16.763-.337-9.45-.458-12.368-.458-36.33s.12-26.895.458-36.457c.458-8.775,1.912-13.6,3.15-16.755a26.679,26.679,0,0,1,6.75-10.357,26.62,26.62,0,0,1,10.342-6.735c3.15-1.245,7.882-2.708,16.658-3.157,9.562-.338,12.375-.45,36.442-.45L90,16.2Zm0,27.585A46.215,46.215,0,1,0,136.215,90,46.212,46.212,0,0,0,90,43.785ZM90,120a30,30,0,1,1,30-30A29.992,29.992,0,0,1,90,120Zm58.845-78.037a10.8,10.8,0,1,1-10.8-10.792A10.808,10.808,0,0,1,148.845,41.962Z" transform="translate(170 168)" /> </svg></a>
CSS
a.share { text-decoration: none; } a.share:first-of-type { margin-left: -1px; } a.share + a.share { margin-left: 12px; } a.share svg .st0 { fill: var(--bc8); } a.share svg .st1 { fill: #fff; } a.share:hover svg .st0 { fill: var(--bec); } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); }
JS
Share on Instagram
Last Edit: Nov 14, 2023, 4:41pm
×
Share on LinkedIn
CODE
×
HTML
<a class='share share-linkedin' href='#' title='Linkedin' rel='noopener noreferrer' target='_blank'><svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 512 512"> <circle class="st0" cx="255" cy="255" r="255" transform="translate(2)" /> <path class="st1" d="M36.934,165H2.726V54.839H36.934ZM19.811,39.812a19.906,19.906,0,1,1,19.811-20A19.979,19.979,0,0,1,19.811,39.812ZM164.967,165H130.832V111.375c0-12.78-.258-29.17-17.786-29.17-17.786,0-20.511,13.885-20.511,28.25V165H58.363V54.839H91.172V69.866h.479c4.567-8.655,15.723-17.789,32.367-17.789,34.621,0,40.986,22.8,40.986,52.411V165Z" transform="translate(179.5 156.999)" /> </svg></a>
CSS
a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); }
JS
Share on LinkedIn
Last Edit: Nov 14, 2023, 4:40pm
×
Small Button (default)
CODE
×
HTML
<button class='btn btn-secondary small' data-filter='all'>All</button>
CSS
button.btn.btn-secondary.small { font-family: var(--body-font-boldstrong-1); font-style: var(--body-font-boldstrong-2); font-weight: var(--body-font-boldstrong-3); 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; background-color:transparent; letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); font-size: var(--fs-xxs); border-color: var(--lc7); color: var(--fsb); margin-top: 12px; margin-right: 12px; margin-bottom: 12px; margin-left: 12px; } @media screen and (max-width: 575px) { button.btn.btn-secondary.small { width:auto; } } .btn.small { border-radius: 30px !important; } @media screen and (max-width: 389px) { .btn.small { width: auto; } } .btn.small:not(.active):focus, .btn.small:not(.active):focus-visible { color: var(--fpb) !important; background-color: var(--bsc2) !important; border-color: var(--lsc2) !important; } .btn.small:not(.active):hover { color: var(--fsc2) !important; background-color: var(--bsc4) !important; border-color: var(--lsc1) !important; }
JS
Small Button (default)
Last Edit: Oct 31, 2023, 11:31am
×
All
Secondary Button (large)
CODE
×
HTML
<button class='btn btn-secondary'>GET IN TOUCH</button>
CSS
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-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-secondary { font-size: var(--fs-m); } } @media screen and (max-width: 575px) { button.btn.btn-secondary { margin-top: 24px; } } @media screen and (max-width: 389px) { button.btn.btn-secondary { width: 100%; } }
JS
Secondary Button (large)
Last Edit: Nov 3, 2023, 10:04am
×
GET IN TOUCH
Primary Button (large)
CODE
×
HTML
<button class='btn btn-primary'>Who we are</button>
CSS
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-primary:hover, button.btn.btn-primary:focus { border-color: var(--lsc1); background-color: var(--bsc1); color: var(--fsc2); } @media screen and (max-width: 991px) { button.btn.btn-primary { font-size: var(--fs-m); } } @media screen and (max-width: 575px) { button.btn.btn-primary { margin-top: 24px; } } @media screen and (max-width: 389px) { button.btn.btn-primary { width: 100%; } }
JS
Primary Button (large)
Last Edit: Nov 3, 2023, 10:04am
×
Who we are
Small Button (active)
CODE
×
HTML
<button class='btn btn-secondary active small' data-filter='0'>All</button>
CSS
button.btn.btn-secondary.active.small { font-family: var(--body-font-boldstrong-1); font-style: var(--body-font-boldstrong-2); font-weight: var(--body-font-boldstrong-3); width:auto; border-width: var(--lw3); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); font-size: var(--fs-xxs); color: var(--fpb); background-color: var(--bsc2); border-color: var(--lsc2); margin-top: 12px; margin-right: 12px; margin-bottom: 12px; margin-left: 12px; } @media screen and (max-width: 575px) { button.btn.btn-secondary.active.small { width:auto; } } .btn.active { cursor: default; }
JS
Small Button (active)
Last Edit: Dec 8, 2023, 9:43am
×
All