/* BonBon Buttons 1.1 by simurai.com
Angepasste Version für 'Loco Locos'
Usage:
Default button: Label
More fancy with icon: Label
Following additional class names are supported:
Farbe: bon_blau, bon_eingabe, bon_violett, bon_aqua, bon_transparent
Material: bon_glas
Grösse: siehe sizes
Form: bon_rund, bon_oval, bon_gebogen, bon_schief, bon_lehne, bon_messer, bon_schild, bon_tropfen, bon_morph
Icon only: bon_icon (wenn nur Icon, kein Text)
Disabled: disabled
*/
/* --------------------------------------------------------
THE button
-------------------------------------------------------- */
.bon_button {
/* text */
text-decoration: none;
font: 30px 'Locofont', sans-serif;
font-weight: bold;
text-shadow: rgba(255,255,255,.5) 0 1px 0;
/* Soll anwählen des Textes verhindern, funktioniert nicht 100%ig: */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
user-select: none;
/* layout */
padding: .1em .5em .1em .5em;
margin: 0;
display: inline-block;
position: relative;
border-radius: 8px;
/* effects */
border-top: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(0,0,0,0.5);
background-image: radial-gradient(ellipse at center top,
rgba(255,255,255,0.7),
rgba(255,255,255,0))/*,
url(noise.png)*/;
transition: background .2s ease-in-out;
}
/* --------------------------------------------------------
button (tag)
-------------------------------------------------------- */
button.bon_button {
border-left: none;
border-right: none;
}
button.bon_button:hover {
cursor: pointer;
}
/* --------------------------------------------------------
Icon
-------------------------------------------------------- */
.bon_button:before {
font: 1.2em/0 sans-serif;
content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */
}
/* icon only */
.bon_icon {
font-weight: normal;
font-style: normal;
}
.bon_icon:before {
display: block;
height: .75em;
line-height: .75em;
margin: 0;
}
/* --------------------------------------------------------
Farben
-------------------------------------------------------- */
/***** Farblos (grau): ******/
.bon_button {
color: hsl(0, 0%, 40%) !important;
background-color: hsl(0, 0%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(0, 0%, 80%) 0 -.1em 3px, hsl(0, 0%, 60%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button:hover { background-color: hsl(0, 0%, 83%); }
/***** Glasig (grau-durchschimmernd): ******/
.bon_button.bon_gleam {
color: hsl(0, 0%, 30%) !important;
background-color: rgba(200,200,200,0.1);
box-shadow: inset rgba(255,254,255,0.2) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(0, 0%, 80%) 0 -.1em 3px,/* hsl(0, 0%, 60%) 0 -.2em 1px,*/ /* 3D-Effekt */
rgba(0,0,0,0.2) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_gleam:hover { background-color: hsl(0, 0%, 70%); }
/***** Schwarz (für externe Links): ******/
.bon_button.bon_black {
color: hsl(0, 0%, 90%) !important;
background-color: hsl(0, 0%, 5%);
box-shadow: rgba(0,0,0,0.4) 0 .3em 5px; /* (vereinfachter Schatten) */
}
.bon_button.bon_black:hover { background-color: hsl(130, 60%, 40%); }
/***** Aus (für blinkende Buttons): ******/
.bon_button.bon_aus {
color: hsl(0, 0%, 90%) !important;
background-color: hsl(0, 0%, 5%);
box-shadow: inset rgba(255,254,255,0.3) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em,
hsl(0, 0%, 50%) 0 -.1em 3px, hsl(0, 0%, 30%) 0 -.2em 1px,
rgba(0,0,0,0.4) 0 .3em 5px;
transition: 0.8s;
}
.bon_button.bon_aus:hover {
background-color: hsl(0, 0%, 30%);
}
/***** Aquamarine: ******/
.bon_button.bon_aqua {
color: hsl(150, 100%, 27%) !important;
background-color: hsl(150, 100%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(150, 100%, 85%) 0 -.1em 3px, hsl(150, 70%, 41%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_aqua:hover { background-color: hsl(170, 100%, 83%); }
/***** Türkis: ******/
.bon_button.bon_tuerkis {
color: hsl(180, 100%, 30%) !important;
background-color: hsl(180, 100%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(180, 100%, 85%) 0 -.1em 3px, hsl(180, 70%, 41%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_tuerkis:hover { background-color: hsl(200, 100%, 83%); }
/***** Blau: ******/
.bon_button.bon_blau {
color: hsl(210, 100%, 33%) !important;
background-color: hsl(210, 100%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(210, 100%, 85%) 0 -.1em 3px, hsl(210, 70%, 41%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_blau:hover { background-color: hsl(230, 100%, 83%); }
/***** Violett: ******/
.bon_button.bon_violett {
color: hsl(240, 100%, 33%) !important;
background-color: hsl(240, 100%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(240, 100%, 81%) 0 -.1em 3px, hsl(240, 70%, 41%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_violett:hover { background-color: hsl(260, 100%, 83%); }
/***** Lila: ******/
.bon_button.bon_lila {
color: hsl(270, 100%, 33%) !important;
background-color: hsl(270, 100%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(270, 100%, 83%) 0 -.1em 3px, hsl(270, 70%, 41%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_lila:hover { background-color: hsl(290, 100%, 80%); }
/***** Pink: ******/
.bon_button.bon_pink {
color: hsl(300, 100%, 33%) !important;
background-color: hsl(300, 100%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(300, 100%, 83%) 0 -.1em 3px, hsl(300, 70%, 41%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_pink:hover { background-color: hsl(320, 100%, 83%); }
/***** Rosa: ******/
.bon_button.bon_rosa {
color: hsl(330, 100%, 33%) !important;
background-color: hsl(330, 100%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(330, 100%, 83%) 0 -.1em 3px, hsl(330, 70%, 41%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_rosa:hover { background-color: hsl(350, 100%, 83%); }
/***** Rot (Eingabe): ******/
.bon_button.bon_eingabe {
color: hsl(0, 100%, 33%) !important;
background-color: hsl(0, 100%, 73%);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(0, 100%, 85%) 0 -.1em 3px, hsl(0, 70%, 41%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_eingabe:hover { background-color: hsl(20, 100%, 81%); }
/***** Dunkles Aquamarine (für NICHT leuchtende BoolBoxen): ******/
.bon_button.bon_dunkelaqua {
color: hsl(150, 30%, 13%) !important;
background-color: hsla(150, 30%, 40%, 0.7);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(150, 30%, 60%) 0 -.1em 3px, hsl(150, 30%, 20%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
background-image: none;
text-shadow: none !important;
}
.bon_button.bon_dunkelaqua:hover { background-color: hsl(150, 30%, 44%); }
/***** Dunkles Türkis (für NICHT leuchtende BoolBoxen): ******/
.bon_button.bon_dunkeltuerkis {
color: hsl(180, 30%, 13%) !important;
background-color: hsla(180, 30%, 40%, 0.7);
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(180, 30%, 60%) 0 -.1em 3px, hsl(180, 30%, 20%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
background-image: none;
text-shadow: none !important;
}
.bon_button.bon_dunkeltuerkis:hover { background-color: hsl(180, 30%, 44%); }
/***** Transparent: ******/
/* (unbenutzt, visuell nicht zu unterscheiden von inaktiven Buttons)
.bon_button.bon_transparent {
color: rgba(0,0,0,0.5) !important;
}
.bon_button.bon_transparent,
.bon_button.bon_transparent:hover,
.bon_button.bon_transparent:active {
background-color: transparent;
background-image: none;
}
.bon_button.bon_transparent:hover {
opacity: .9;
}
*/
/***** Flaggen: ******/
.bon_button.bon_flagge {
color: hsl(0, 100%, 100%) !important;
background-image: url("../muster/abdunkler.png"), url("../muster/flaggen.png");
/* Abunkler: 2 Zustände, 2 x 100% = 200% */
/* Flaggen: Anzahl Flagge-Spalten (15) * 100% = 1500% */
background-size: 200%, 1500%;
/*background-size: auto, auto; */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em,
hsl(0, 0%, 90%) 0 -.1em 3px, hsl(0, 0%, 60%) 0 -.2em 1px,
rgba(0,0,0,0.4) 0 .3em 5px;
}
/* Hinweis: Pfadangaben in CSS-Files gehen von der Position ebendieses CSS-Files aus.
Daher ist hier die Position von index.html sowie der Wert von GAMEPFAD nicht relevant.
Flaggen-Gesamtgrafik: 1800 x 840 (15 x 14 Fahnen)
Grösse der einzelnen Fahnen: 120 x 60 Pixel
*/
.bon_button.bon_daH,
.bon_button.bon_daD:hover
{ background-position: 100% 0px, calc(100%/14 * 2) calc(100%/13 * 3); } /* DÄNISCH */
.bon_button.bon_daD { background-position: 0px 0px, calc(100%/14 * 2) calc(100%/13 * 3); }
.bon_button.bon_deH,
.bon_button.bon_deD:hover
{ background-position: 100% 0px, calc(100%/14 * 5) calc(100%/13 * 4); } /* DEUTSCH */
.bon_button.bon_deD { background-position: 0px 0px, calc(100%/14 * 5) calc(100%/13 * 4); }
.bon_button.bon_enH,
.bon_button.bon_enD:hover
{ background-position: 100% 0px, calc(100%/14 * 4) calc(100%/13 * 12); } /* ENGLISCH */
.bon_button.bon_enD { background-position: 0px 0px, calc(100%/14 * 4) calc(100%/13 * 12); }
.bon_button.bon_esH,
.bon_button.bon_esD:hover
{ background-position: 100% 0px, calc(100%/14 * 12) calc(100%/13 * 10); } /* SPANISCH */
.bon_button.bon_esD { background-position: 0px 0px, calc(100%/14 * 12) calc(100%/13 * 10); }
.bon_button.bon_frH,
.bon_button.bon_frD:hover
{ background-position: 100% 0px, calc(100%/14 * 1) calc(100%/13 * 4); } /* FRANZÖSISCH */
.bon_button.bon_frD { background-position: 0px 0px, calc(100%/14 * 1) calc(100%/13 * 4); }
.bon_button.bon_hiH,
.bon_button.bon_hiD:hover
{ background-position: 100% 0px, calc(100%/14 * 2) calc(100%/13 * 5); } /* INDISCH */
.bon_button.bon_hiD { background-position: 0px 0px, calc(100%/14 * 2) calc(100%/13 * 5); }
.bon_button.bon_itH,
.bon_button.bon_itD:hover
{ background-position: 100% 0px, calc(100%/14 * 8) calc(100%/13 * 5); } /* ITALIENISCH */
.bon_button.bon_itD { background-position: 0px 0px, calc(100%/14 * 8) calc(100%/13 * 5); }
.bon_button.bon_ptH,
.bon_button.bon_ptD:hover
{ background-position: 100% 0px, calc(100%/14 * 5) calc(100%/13 * 9); } /* PORTIGIESICH */
.bon_button.bon_ptD { background-position: 0px 0px, calc(100%/14 * 5) calc(100%/13 * 9); }
.bon_button.bon_ruH,
.bon_button.bon_ruD:hover
{ background-position: 100% 0px, calc(100%/14 * 8) calc(100%/13 * 9); } /* RUSSISCH */
.bon_button.bon_ruD { background-position: 0px 0px, calc(100%/14 * 8) calc(100%/13 * 9); }
.bon_button.bon_svH,
.bon_button.bon_svD:hover
{ background-position: 100% 0px, calc(100%/14 * 2) calc(100%/13 * 11); } /* SCHWEDISCH */
.bon_button.bon_svD { background-position: 0px 0px, calc(100%/14 * 2) calc(100%/13 * 11); }
.bon_button.bon_zhH,
.bon_button.bon_zhD:hover
{ background-position: 100% 0px, calc(100%/14 * 6) calc(100%/13 * 2); } /* CHINESISCH */
.bon_button.bon_zhD { background-position: 0px 0px, calc(100%/14 * 6) calc(100%/13 * 2); }
/***** Face (Performance, FPS): ******/
.bon_button.bon_face {
color: hsl(0, 100%, 100%) !important;
background-image: url("../muster/faces.png");
background-size: 300%; /* Anzahl Faces * 100% */
}
.bon_button.bon_facecolor0 {
background-position: 0% 0px; /* 0%, 50% oder 100% */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em,
hsl(80, 100%, 75%) 0 -.1em 3px, hsl(80, 70%, 31%) 0 -.2em 1px,
rgba(0,0,0,0.4) 0 .3em 5px;
}
.bon_button.bon_facecolor1 {
background-position: 50% 0px; /* 0%, 50% oder 100% */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em,
hsl(50, 100%, 75%) 0 -.1em 3px, hsl(50, 70%, 31%) 0 -.2em 1px,
rgba(0,0,0,0.4) 0 .3em 5px;
}
.bon_button.bon_facecolor2 {
background-position: 100% 0px; /* 0%, 50% oder 100% */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em,
hsl(0, 100%, 75%) 0 -.1em 3px, hsl(0, 70%, 31%) 0 -.2em 1px,
rgba(0,0,0,0.4) 0 .3em 5px;
}
/* --------------------------------------------------------
Status
-------------------------------------------------------- */
.bon_button:active {
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* Aufhellung */
hsl(0, 0%, 60%) 0 -.1em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .2em 6px; /* Schattenwurf */
transform: translateY(-.1em); /* vertikale Verschiebung wenn gedrückt */
}
.bon_button[disabled],
.bon_button[disabled]:hover {
opacity: .9;
cursor: default;
color: rgba(0,0,0,0.2) !important;
text-shadow: none !important;
background-color: transparent;
background-image: none;
border-top: none;
transform: none; /* Verhindert dass Button eingedrückt wird beim Anwählen */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* Aufhellung */
hsl(0, 0%, 80%) 0 -.1em 3px, hsl(0, 0%, 60%) 0 -.2em 1px, /* 3D-Effekt */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
}
.bon_button.bon_eingabe:active {
transform: none; /* Verhindert dass Button eingedrückt wird beim Anwählen */
}
/* --------------------------------------------------------
Materialien
-------------------------------------------------------- */
.bon_button.bon_glas:after {
content: "";
position: absolute;
width: 90%;
height: 60%;
top: 0;
left: 5%;
border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
/* Reflexion: */
background-image: linear-gradient(to right,
rgba(255,255,255,.55),
rgba(255,255,255,0) 50%,
rgba(255,255,255,0) 80%,
rgba(255,255,255,.5));
}
.bon_button.bon_icon.bon_glas:after
{
height: 75% ;
}
/* -------------- Glass + Transparent -------------- */
.bon_button.bon_glas {
text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
}
.bon_button.bon_glas:active {
text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;
}
/* --------------------------------------------------------
Formen
-------------------------------------------------------- */
/* bon_eckig */
.bon_eckig, .bon_eckig.bon_glas:after {
border-top: none;
border-radius: 0.1em;
}
/* bon_rund */
.bon_rund, .bon_rund.bon_glas:after {
border-top: none;
border-radius: 1em;
}
/* bon_oval */
.bon_oval {
border-top: none;
padding-left: .8em;
padding-right: .8em;
border-radius: 5em / 2em;
}
.bon_oval.bon_glas:after {
top: 5%;
border-radius: 5em / 2em 2em 1em 1em;
}
.bon_oval.bon_icon {
padding-left: .8em;
padding-right: .8em;
border-radius: 1.5em / 1em;
}
.bon_oval.bon_icon.bon_glas:after {
border-radius: 1.5em / 1em;
}
/* bon_gebogen */
.bon_gebogen, .bon_gebogen.bon_glas:after {
border-top: none;
border-radius: .5em / 1em;
}
/* bon_schief */
.bon_schief {
border-top: none;
padding-right: 1.2em;
padding-left: 0.8em;
border-radius: 5em 1em / 5em 1em;
}
.bon_schief.bon_glas:after {
left: 5%;
border-radius: 7em 1em / 5em 1em;
}
.bon_schief.bon_icon {
padding-right: .9em;
padding-left: .8em;
}
/* bon_lehne */
.bon_lehne, .bon_lehne.bon_glas:after {
border-top-color: rgba(255,255,255,0.5);
border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;
}
.bon_lehne.bon_glas:after {
left: 6%;
width: 88%;
}
/* bon_messer */
.bon_messer {
padding-left: 1.5em;
border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;
}
.bon_messer.bon_glas:after {
left: 3%;
width: 97%;
border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;
}
.bon_messer.bon_glas.bon_icon:after {
left: 5%;
width: 95%;
border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;
}
/* bon_schild */
.bon_schild, .bon_schild.bon_glas:after {
border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
}
.bon_schild {
padding-left: .8em;
padding-right: .8em;
}
.bon_schild.bon_icon {
padding-left: .6em;
padding-right: .6em;
}
/* bon_tropfen */
.bon_tropfen {
border-top: none;
border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;
}
.bon_tropfen.bon_glas:after {
left: 4%;
border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;
}
.bon_tropfen.bon_icon {
padding-right: .6em;
}
/* bon_morph */
.bon_morph {
border-top: none;
border-radius: 5em / 2em;
transition: border-radius .1s linear;
}
.bon_morph:hover {
/* ORIGINAL: border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; */
border-radius: .4em;
}
/* ORIGINAL:
.bon_morph:active {
border-radius: .3em;
} */
.bon_morph:after {
display: none;
}
/* --------------------------------------------------------
SPEZIALFALL Wechsel-Button
-------------------------------------------------------- */
.bon_wechsler {
/* text */
text-decoration: none;
font: 30px 'Locofont', sans-serif;
font-weight: bold;
text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;
/* Soll anwählen des Textes verhindern, funktioniert nicht 100%ig: */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
user-select: none;
/* layout */
padding: .1em .5em .1em .5em;
margin: 0;
display: inline-block;
position: relative;
border-radius: 14px;
/* effects */
border-width: 0.1em 0.1em 0.05em 0.1em;
border-style: solid;
transition: background-image .3s ease-in-out; /* Farbumblendung (funkioniert nur bei IE) */
}
/* ==== Farbvariante A ==== */
.bon_wechsler.bon_wechA {
/* Rand-Farben: */
border-color: #eee #bbb #888 #ddd; /* INNERSTE Randfarbe: oben, rechts, unten, links */
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.6) 0 -0.1em .3em, /* Aufhellung */
hsl(250, 40%, 70%) 0 -.1em 3px, /* MITTLERE Randfarbe */
hsl(250, 30%, 40%) 0 -.2em 1px, /* ÄUSSERSTE Randfarbe */
rgba(0,0,0,0.4) 0 .3em 5px; /* Schattenwurf */
/* Innen-Farben: */
background-image: linear-gradient(to bottom, /* Richtung */
hsl(300, 100%, 70%) 40%, /* hsl(Farbton, Sättigung, Helligkeit) Position */
hsl(240, 100%, 73%) 60%);
/* Textfarbe: */
color: hsl(237, 70%, 40%) !important;
}
.bon_wechsler.bon_wechA:hover {
background-image: linear-gradient(to bottom,
hsl(120, 100%, 76%) 40%,
hsl(80, 100%, 76%) 60%);
}
/* ==== Farbvariante B ==== */
/* (in Loco Locos gibt es keine weiteren Farbvarianten) */
/* Button-tag: */
button.bon_wechsler {
/*
border-left: none;
border-right: none; */
}
button.bon_wechsler:hover {
cursor: pointer;
}
.bon_wechsler:after {
/* obenseitiger Glanz */
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 0;
left: 0;
border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;
background-image: linear-gradient(to right,
rgba(255,255,255,.55),
rgba(255,255,255,0) 50%,
rgba(255,255,255,0) 80%,
rgba(255,255,255,.5));
}
.bon_wechsler:active {
background-image: linear-gradient(to bottom,
hsl(120, 100%, 78%) 40%,
hsl(80, 100%, 78%) 60%);
}
.bon_wechsler[disabled],
.bon_wechsler[disabled]:hover {
opacity: .7;
cursor: default;
color: rgba(0,0,0,0.2) !important;
text-shadow: none !important;
background-color: transparent;
background-image: none;
}
/* --------------------------------------------------------
Platzhalter (Label innerhalb Eingabefeld)
-------------------------------------------------------- */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #D04E4E;
opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #D04E4E;
}