Buttonrahmen an den Ecken dunkel

PhilvanGaat · February 10, 2015 at 11:12 AM

Hallo Zusammen,

ich bin seit einiger Zeit echt am verzweifeln. WBB hat ja von Hause aus runde Button, ich wollte sie jedoch ein wenig eckiger haben für mein Design. Jetzt hab ich folgenden Code genommen:

CSS

button, input[type='reset'], input[type='submit'], input[type='button'], .button {border-radius: 3px;border-style: solid;border-width: 1px;cursor: pointer;display: inline-block;margin: 0 4px;padding: 5px 13px;position: relative;}

und in die zusätzlichen CSS Einstellungen eingefügt.

Was ich jedoch zusehen bekomme ist folgendes:

Die Ecken des Buttons sind dunkler als der Rest des Rahmens. Woran könnte das denn liegen?

Liebe Grüße

cls-design · February 10, 2015 at 11:18 AM

Lösch das wieder raus und verwende stattdessen folgende LESS-Variable:

@wcfButtonBorderRadius:3px;

Dafür ist die nämlich da. Zweites Feld im Stileditor.

PhilvanGaat · February 10, 2015 at 5:34 PM

Danke für die schnelle Antwort, aber irgendwie hat es das auch nich gebracht.

Hier mal mein ganzer Code für die Buttons:

CSS

/* Button */




button, input[type='reset'], input[type='submit'], input[type='button'], .button {border-radius: 3px;border-style: solid;border-width: 1px;cursor: pointer;display: inline-block;margin: 0 4px;padding: 5px 13px;position: relative;}
.button, input[type='reset']:not([disabled]), input[type='submit']:not([disabled]), input[type='button']:not([disabled]), button:not([disabled]) {background-color: #22333C;border-color: #d4d8da;color: #ffffff;text-decoration: none;text-shadow: 0 1px 0 rgba(0,0,0,1);}
.button.buttonPrimary, input[type='submit']:not([disabled]), input[type='button']:not([disabled]).buttonPrimary, button:not([disabled]).buttonPrimary {background-color: #283b46;border-color: #283b46;color: #ffffff;font-weight: bold;text-shadow: 0 -1px 0 rgba(0,0,0,0);}
.button.buttonPrimary .icon, input[type='submit']:not([disabled]) .icon, input[type='button']:not([disabled]).buttonPrimary .icon, button:not([disabled]).buttonPrimary .icon {color: #ffffff;}
.button:hover, input[type='reset']:not([disabled]):hover, input[type='submit']:not([disabled]):hover, input[type='button']:not([disabled]):hover, button:not([disabled]):hover {background-color: #1e5b7b;border-color: #ffffff;color: #ffffff;text-decoration: none;z-index: 100;text-shadow: 0 -1px 0 rgba(0,0,0,0);}
.button:hover .icon, input[type='reset']:not([disabled]):hover .icon, input[type='submit']:not([disabled]):hover .icon, input[type='button']:not([disabled]):hover .icon, button:not([disabled]):hover .icon {color: #ffffff;}
.button.buttonPrimary:hover, input[type='submit']:not([disabled]):hover, input[type='button']:not([disabled]).buttonPrimary:hover, button:not([disabled]).buttonPrimary:hover {background-color: #22333c;border-color: #152026;color: #ffffff;text-shadow: 0 -1px 0 rgba(0,0,0,0);}
.button.buttonPrimary:hover .icon, input[type='submit']:not([disabled]):hover .icon, input[type='button']:not([disabled]).buttonPrimary:hover .icon, button:not([disabled]).buttonPrimary:hover .icon {color: #ffffff;}
input[type='reset']:disabled, input[type='submit']:disabled, input[type='button']:disabled, button:disabled {background-color: #ffffff;border-color: #d4d8da;color: #ffffff;cursor: not-allowed;text-decoration: none;text-shadow: 0 1px 0 rgba(0,0,0,0);}
.button.active, input[type='button'].active, button.active, .button.active:hover, input[type='button'].active:hover, button.active:hover {background-color: #22333C;border-color: #ffffff;color: #ffffff;box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.0);text-shadow: 0 -1px 0 rgba(0,0,0,0);}
.button.active .icon, input[type='button'].active .icon, button.active .icon, .button.active:hover .icon, input[type='button'].active:hover .icon, button.active:hover .icon {color: #ffffff;text-shadow: 0 -1px 0 rgba(0,0,0,0);}
button.small, .button.small {border-radius: 3px;font-size: .85rem;min-height: 13px;padding: 5px 11px;margin: 0 2px;}
.button .icon, input[type='reset']:not([disabled]) .icon, input[type='submit']:not([disabled]) .icon, input[type='button']:not([disabled]) .icon, button:not([disabled]) .icon {-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: .05s;transition-duration: .05s;-webkit-transition-timing-function: linear;transition-timing-function: linear;color: #ffffff;}

Display More

cls-design · February 10, 2015 at 5:48 PM

Und warum hast du jetzt schon wieder border-radius in den Deklarationen drin? Ich hab dir doch gesagt dafür gibt es LESS-Variablen:

@wcfButtonBorderRadius

und

@wcfSmallButtonBorderRadius

für die kleinen Buttons.

PhilvanGaat · February 10, 2015 at 6:07 PM

Soll ich komplett alle border-radius raus nehmen oder komplett immer die ganzen Zeilen?

EDIT: So, jetzt hab ich komplett alle border-radius rausgenommen und die LESS-Variablen eingefügt und es ändert nichts.

Participate now!