Buttons
Secondary Button
CODE
×
HTML
<button class='secondary'>Secondary Action</button>
CSS
button.secondary { font-size: 16px; line-height: 26px; line-height: 125%; background-color: var(--white); color: rgba(112,112,112,1); display: inline-block; height: 49px; border-radius: 49px; border: 1px solid #4E4E4E; padding: 0 40px ; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; text-align:center; cursor:pointer; } button.secondary:hover, button.secondary:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); }
JS
Secondary Button
barrierefrei
Letzte Änderung: 15.01.2025 - 10:56 Uhr
×
Secondary Action
Primary Button
CODE
×
HTML
<button class='primary'>Primary Action</button>
CSS
button.primary { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; background-color: rgba(78,78,78,1); color: var(--white); text-align:center; display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 12px 40px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; cursor: pointer; } button.primary:hover, button.primary:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); }
JS
Primary Button
barrierefrei
Letzte Änderung: 15.01.2025 - 10:46 Uhr
×
Primary Action
Secondary Button (100% width)
CODE
×
HTML
<button class='secondary w100'>AD Kanton Bern</button>
CSS
button.secondary.w100 { font-size: 16px; line-height: 26px; background-color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: 1px solid #4E4E4E; padding: 0 40px ; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; text-align:center; cursor:pointer; width:100%; margin-top: 0px; margin-right: 0px; margin-bottom: 25px; margin-left: 0px; } button.secondary.w100:hover, button.secondary.w100:focus { -webkit-transform: scale(1.03); -ms-transform: scale(1.03); transform: scale(1.03); } button.secondary { font-size: 16px; line-height: 26px; line-height: 125%; background-color: var(--white); color: rgba(112,112,112,1); display: inline-block; height: 49px; border-radius: 49px; border: 1px solid #4E4E4E; padding: 0 40px ; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; text-align:center; cursor:pointer; } button.secondary:hover, button.secondary:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); }
JS
Secondary Button (100% width)
barrierefrei
Erstellt: 19.09.2024 - 14:10 Uhr
Letzte Änderung: 19.09.2024 - 14:43 Uhr
×
AD Kanton Bern
Login Button
CODE
×
HTML
<button class='submit login'><span style="margin-right:10px">Anmelden</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="25" viewBox="0 0 20 14" style="enable-background:new 0 0 20 14;" xml:space="preserve" class="first"> <style type="text/css"> .st0{fill:#fff;} </style> <g transform="translate(10 -38.25)"> <g transform="translate(-10 38.25)"> <path class="st0" d="M10.5,10.1c-0.2,0.2-0.2,0.5,0,0.7c0.2,0.2,0.5,0.2,0.7,0l3.4-3.4c0.2-0.2,0.2-0.5,0-0.8l-3.4-3.4 c-0.2-0.2-0.5-0.2-0.7,0c-0.2,0.2-0.2,0.5,0,0.7l2.6,2.6H2.4C2.1,6.5,1.9,6.7,1.9,7s0.2,0.5,0.5,0.5h10.8L10.5,10.1z M16.1,0H8.3 c-1.1,0-2,0.9-2,2v2h1V2c0-0.6,0.4-1,1-1h7.8c0.6,0,1,0.4,1,1v10c0,0.6-0.4,1-1,1H8.3c-0.6,0-1-0.4-1-1v-2h-1v2c0,1.1,0.9,2,2,2 h7.8c1.1,0,2-0.9,2-2V2C18.1,0.9,17.2,0,16.1,0z"/> </g> </g> </svg></button>
CSS
button.submit.login { overflow:hidden; text-align:center; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 24px; background-color: rgba(78,78,78,1); color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 0px 34px 0px 36px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: all 250ms ease-in-out; cursor:pointer; } button.submit.login:hover, button.submit.login:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } @media screen and (max-width: 767px) { button.submit.login { margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; } } button.submit { overflow:hidden; text-align:center; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 500; line-height: 24px; background-color: rgba(78,78,78,1); color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 0px 34px 0px 36px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: all 250ms ease-in-out; cursor:pointer; } button.submit:hover, button.submit:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } @media screen and (max-width: 767px) { button.submit { margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; } }
JS
Login Button
barrierefrei
Erstellt: 12.09.2024 - 13:47 Uhr
Letzte Änderung: 12.09.2024 - 14:54 Uhr
×
Anmelden
Send Button
CODE
×
HTML
<button class='submit'><span style="margin-right:10px">Senden</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19" height="18" viewBox="0 0 22.5 21.5" style="enable-background:new 0 0 22.5 21.5;" xml:space="preserve" class="first"> <style type="text/css"> .st0{fill:#fff;} </style> <path class="st0" d="M22.3,0.5c-0.2-0.5-0.8-0.6-1.3-0.4L0.5,10.8C0.3,11,0.1,11.1,0,11.4c-0.1,0.2-0.1,0.5,0,0.7 c0.1,0.2,0.3,0.4,0.5,0.5L8,15.1v5.5c0,0.5,0.4,0.9,0.9,0.9c0.3,0,0.6-0.1,0.8-0.4l3.2-4.4l5.8,2c0.1,0,0.2,0.1,0.3,0.1h0 c0.5,0,0.9-0.3,0.9-0.8l2.5-16.9C22.4,0.9,22.4,0.7,22.3,0.5z M10.6,14l9.5-10.2l-1.9,12.8L10.6,14z M17.1,4.3l-8.4,9l-5.4-1.8 L17.1,4.3z"/> </svg></button>
CSS
button.submit { overflow:hidden; text-align:center; font-size: 16px; line-height: 26px; font-family: 'Roboto'; font-style: normal; font-weight: 500; line-height: 24px; background-color: rgba(78,78,78,1); color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 0px 34px 0px 36px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: all 250ms ease-in-out; cursor:pointer; } button.submit:hover, button.submit:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } @media screen and (max-width: 767px) { button.submit { margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; } }
JS
Send Button
barrierefrei
Erstellt: 12.06.2024 - 09:49 Uhr
Letzte Änderung: 12.09.2024 - 14:40 Uhr
×
Senden
Go-Next Button (horizontal)
CODE
×
HTML
<button class='go-next'><img src="img/right-arrow-white.svg" style="margin-right: 10px;height:19px;width:auto;vertical-align:middle;margin-bottom: 1px;"><span>Weiter</span><img src="img/right-arrow-white.svg" style="margin-left: 17px;height:19px;width:auto;vertical-align:middle;margin-bottom: 1px;"></button>
CSS
button.go-next { text-align:center; color: var(--white); font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; background-color: rgba(78,78,78,1); display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 0 30px 0 0px; vertical-align: middle; margin: 40px 30px 40px 0; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; cursor: pointer; overflow: hidden; } @media screen and (max-width: 767px) { button.go-next { margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; } }
JS
Go-Next Button (horizontal)
Letzte Änderung: 08.08.2024 - 20:27 Uhr
×
Weiter
Go-Back Button (horizontal)
CODE
×
HTML
<button class='go-back'><img src="img/go-back.svg" style="margin-right:13px;height:19px;width:auto;vertical-align:middle;margin-bottom: 1px;"><span>Zurück</span><img src="img/go-back.svg" style="margin-left:9px;height:19px;width:auto;vertical-align:middle;margin-bottom: 1px;"></button>
CSS
button.go-back { overflow:hidden; text-align:center; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; background-color: var(--white); color: rgba(112,112,112,1); display: inline-block; height: 49px; border-radius: 49px; border: 1px solid #4E4E4E; padding: 12px 0px 12px 30px ; vertical-align: middle; margin: 0 30px 0 -1px; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; cursor: pointer; } @media screen and (max-width: 767px) { button.go-back { margin-top: 20px; margin-right: 0; margin-bottom: 20px; margin-left: 0; } }
JS
Go-Back Button (horizontal)
Letzte Änderung: 08.08.2024 - 20:27 Uhr
×
Zurück
Loading Button
CODE
×
HTML
<button class='submit-spin'><img src="img/spin.svg" style="height:32px;width:32px;vertical-align:middle;margin-bottom: 1px;"></button>
CSS
button.submit-spin { overflow:hidden; text-align:center; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; background-color: rgba(78,78,78,1); color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 0px 34px 0px 36px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: all 250ms ease-in-out; cursor:pointer; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 8px; padding-right: 42px; padding-bottom: 8px; padding-left: 42px; } @media screen and (max-width: 767px) { button.submit-spin { margin-right: 0; margin-left: 0; } }
JS
Loading Button
Erstellt: 16.10.2021 - 13:45 Uhr
Letzte Änderung: 12.06.2024 - 09:39 Uhr
×
Second. Button n-active
CODE
×
HTML
<button class='secondary not-active'>Button</button>
CSS
button.secondary.not-active { text-align:center; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; background-color: rgba(112,112,112,1); background-color: var(--white); display: inline-block; height: 49px; border-radius: 49px; border: 1px solid #4E4E4E; padding: 0 40px ; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; opacity: 0.3; cursor: default; } button.secondary.not-active:hover, button.secondary.not-active:focus { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } button.secondary { font-size: 16px; line-height: 26px; line-height: 125%; background-color: var(--white); color: rgba(112,112,112,1); display: inline-block; height: 49px; border-radius: 49px; border: 1px solid #4E4E4E; padding: 0 40px ; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; text-align:center; cursor:pointer; } button.secondary:hover, button.secondary:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); }
JS
Second. Button n-active
Letzte Änderung: 24.08.2021 - 19:39 Uhr
×
Button
Primary Button n-active
CODE
×
HTML
<button class='primary not-active'>Button</button>
CSS
button.primary.not-active { text-align:center; background-color: rgba(222,222,222,1); color: var(--white); font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 12px 40px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; cursor: default; } button.primary.not-active:hover, button.primary.not-active:focus { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } button.primary { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; background-color: rgba(78,78,78,1); color: var(--white); text-align:center; display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 12px 40px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; cursor: pointer; } button.primary:hover, button.primary:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); }
JS
Primary Button n-active
×
Button