Unterstützung bei Button Styling

bvfbev · 21. Juli 2023

Hallo liebe Joomla Community,

ich arbeite aktuell an einem Projekt, bei dem ich einen bestimmten Button-Stil erstellen möchte. Es handelt sich um den Button mit der Beschriftung "MITGLIED WERDEN". Aktuell zeigt dieser Button beim Hovern einen hellen/weißen Hintergrund an, den ich gerne entfernen möchte.

Um präziser zu sein, ich möchte erreichen, dass der Hintergrund dieses Buttons beim Hovern so aussieht wie der des größeren Buttons an gleicher Stelle.

Alternativ, wenn der helle/weiße Hintergrund nicht entfernt werden kann, könnte man auch den kleineren (weißen) "MITGLIED WERDEN" Button so groß darstellen, wie es der größere Button aktuell mach? Auch hier bin ich nicht sicher, wie man das erreichen kann und würde mich über jegliche Hilfe sehr freuen.

Hier ist der Link, https://rb.gy/x26yl und hier die Demo https://codepen.io/rezaardi/pen/EEXbBm.

Beste Grüße

zero · 22. Juli 2023

Ist das schon gelöst?

bvfbev · 22. Juli 2023

Hallo, nein. Ich habe es mal versucht, zu visualisieren.

Auf dem Bild habe ich einen roten Rahmen erstellt. Alles in dem roten Rahmen ist mit "hellen/weißen Hintergrund" gemeint.

Diese Fläche soll sich bis zum grünen Rahmen ausdehnen. Ansonsten wäre noch die Alternative von Interesse.

Grüße

Elwood · 22. Juli 2023

Also bei mir wird jetzt dieser Button angezeigt, da ist kein weißer Hintergrund mehr:

bvfbev · 22. Juli 2023

Elwood Ich meine den oben darüber, wie auch im bereitgestellten Demolink dargestellt.

Elwood · 22. Juli 2023

Soll der Button ein 'Hover' haben, oder immer den Hintergrund anzeigen?

bvfbev · 22. Juli 2023

Zitat

Soll der Button ein 'Hover' haben, oder immer den Hintergrund anzeigen?

Ja, hat er ja schon. Ein Hover-Effekt soll auch bleiben.

Also, ich versuche es noch einmal zu erklären. Wenn man mit der Maus über den Button fährt, sieht man ja ein helleres Rechteck (direkt um das Wort "MITGLIED WERDEN") als das, welches bis zum Rand geht. Richtig? Ich meine, das sind zwei unterschiedliche Weißnuancen. Ich möchte, dass entweder das hellere Rechteck, sich von den Dimensionen her, genau bis zum orangen Rand ausdehnt (im Hover Status), oder, wenn das nicht möglich ist, das hellere Rechteck die Farbe annimmt, die das größere Rechteck hat. Ich weiß nicht, wie ich das noch besser beschreiben soll. Im Demo sieht man, dass der Hintergrund im Hover Status genau die Größe des Buttons ausfüllt. Das möchte ich mit meinem Button auch erreichen.

zero · 22. Juli 2023

Ich verstehe jetzt zumindest, was du meinst...hm.

firstlady · 22. Juli 2023

Dein .btn-star, .btn-star .title hat ein fettes padding, deshalb.

Es ist aber alles inline style und nur im Quellcode sichtbar.

Sieger66 · 22. Juli 2023

Ja, da war mal wieder jemand schneller.

So ist es derzeit nicht nur einmal per inline style vorhanden:

Code

.btn-star, .btn-star .title {
  position:relative;
  background-color:rgba(255,255,255,0.03);
  padding:10px 30px;
  display:block;
  max-width:100%;
  margin: 0 auto;
  color:rgba(255,255,255,0.4); 
  font-weight:100;
  transition:color 0.5s ease , background-color 0.1s ease;
  text-decoration: none;
  border: none;
}

Alles anzeigen

Sieger66 · 22. Juli 2023

Könntest ja wohl stattdessen oder zusätzlich z.B.:

line-height: 4;

benutzen.

zero · 23. Juli 2023

Das Padding ist mir auch aufgefallen, aber wenn ich das im Firefox-Inspektor ändere bzw. rausnehme, ändert sich der Button nicht, das hat mich etwas irritiert?

bvfbev · 23. Juli 2023

Hallo zusammen,

ich hatte mir das Padding-Problem auch angeschaut und war zunächst etwas unschlüssig, wie ich weiter vorgehen sollte.

Die Lösung kam für mich mit dem Vorschlag von Sieger66. Zuerst habe ich die Zeile line-height: 4; zu .btn-star, .btn-star .title hinzugefügt. Dadurch wurde der Button größer, behielt aber sein Padding. Das Entfernen des Paddings hatte in diesem Fall keine Wirkung.

Erst als ich padding: 0!important; hinzufügte, erhielt ich das gewünschte Ergebnis.

.btn-star, .btn-star .title {

line-height: 4;

padding: 0!important;

}

Vielen Dank an alle Mithelfer und schönen Restsonntag!

Sieger66 · 23. Juli 2023

Zitat von bvfbev

Das Entfernen des Paddings hatte in diesem Fall keine Wirkung.
Erst als ich padding: 0!important; hinzufügte, erhielt ich das gewünschte Ergebnis.

Weil:

Zitat von Sieger66

es derzeit nicht nur einmal per inline style vorhanden

Das von mir in #10 zitierte CSS wird ja beim zweiten gleichartigen Button auch erneut später eingebunden und damit deine Änderung überschrieben bzw. das padding:10px 30px; diesbezüglich wieder ergänzt bzw. hinzugefügt.

firstlady · 24. Juli 2023

Vorsichtige Frage: Ist dieses Flirren beabsichtigt? Mir wird richtig übel davon, deshalb habe ich das auch nicht weiter analysiert.

WM-Loose · 24. Juli 2023

Mir gefällt das auch nicht und Barrierfreihet sollte man gerade als Bundesverband unbedingt beachten.

Versuch es doch mal mit nachfolgendem Code als Modul auf einer Modulposition (dann siehst du was ich meine):

Code

<!-- Das ist ein einfaches Beispiel für einen Button mit Modal-Box als PopUp -->
<p><a href="#modal-example" class="btn btn-sm btn-primary" uk-toggle>Button-Name</a></p>
<!-- Dies ist der Modal-Box-Bereich -->
<div id="modal-example" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h3 class="uk-modal-title"><span style="font-size: 14pt;">Hier kann der einleitende text stehen:</span></h3>
        <p>Hier kann dann beliebider Text eingefügt werden, der in einem PopUp-Fenster dargestellt wird oder man erstellt einen Beitrag und leitet nach Klick auf den Button einfach zum Beitrag weiter.</p>
        <p class="uk-text-right">
            <button type="button" class="uk-button uk-button-default uk-modal-close">schließen</button>
        </p>
    </div>
</div>

Alles anzeigen

Natürlich kannst du den Button auch auf einen Beitrag weiterleiten.