Ergebnis 1 bis 2 von 2

Thema: Action Button für Newsletter

  1. #1
    HTML Newbie
    Registriert seit
    12.10.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Action Button für Newsletter

    Liebe Community,
    vielleicht kann mir jemanden helfen. Bin anscheinden zu blond bzw. kenn ich mich nicht so gut aus mit CSS.
    Ich sollte für eine Bekannte einen Newsletter machen und einen "Call-To-Action Button" einbauen, der genaue CSS-Vorgaben hat. Nur leider weiß ich nicht genau wie.

    So sollte er aussehen:

    Aktion-Button.png

    Hab mal folgendes verbrochen

    <a class="button" href="#">SHOP NOW &nbsp; &gt;</a></td>

    .button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-family: 'Martel Sans', sans-serif; font-size: 18px;
    padding-left: 1.125em;
    padding-right: 0.5em;
    padding-top: 0.2778em;
    padding-bottom: 0.2778em;
    border: 1px solid #000000;
    border-radius: 0px;
    color: #000000;
    text-decoration: none;
    }

    Nun denn, die Vorgaben waren:

    font-family: 'Martel Sans', sans-serif
    font-size: 18px
    padding-left: 20px; (1.125em)
    padding-top: 5px; (0.2778em)
    padding-bottom: 5px; (0.2778em)
    border-size: 1px
    border-radius: 0

    Abstand zwischen "Buchen" und ">": 20px (1.125em)
    Abstand zwischen ">" und rechter Rand: 9px (0.5em)

    Besonders hier weiß ich nicht, wie das gehen soll, dass hier das ">" eigene Definitionen braucht.

    Für Hilfe wäre ich sehr Dankbar, schöne Grüße, Jenny

  2. #2
    HTML Newbie
    Registriert seit
    27.10.2016
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Action Button für Newsletter

    Hallo,

    um dem Pfeil eigene Defintionen zu geben, kann man mit deinem CSS-Pseudo-Element arbeiten und den Pfeil rein über CSS-Einfügen
    HTML wäre dann so
    Code:
    <a class="button arrow" href="#">SHOP NOW</a>
    Anmerkung: Ich habe die "arrow" Klasse hinzugefügt, damit nur hier der Pfeil erscheint und nicht bei allen "button" Elementen.
    CSS Code:
    Code:
    
    .button.arrow{
    font-family: 'Martel Sans', sans-serif;
    font-size: 18px;
    padding-left: 20px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    border-size: 1px;
    border-radius: 0;
    }
    .button.arrow:after{
    content:'>';
    padding-left: 20px;
    padding-right: 9px;
    }
    Anmerkung: Die Schriftart Martel Sans muss eingebunden sein, ansonsten wird nur die Standard sans-serif Schrift eingebunden.

    Wir haben hier einen Beitrag, indem CSS-Pseudo-Elemente noch ein wenig erklärt werden, bzw in einem Beispiel dargestellt werden: https://sketch.media/blog/ratgeber/4...schoenern.html
    Infos über Joomla, Webdesign und Co bei sketch.media

Ähnliche Themen

  1. Formular-action
    Von erika im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 26.09.2012, 23:07
  2. Zwei form Action mit einem Button
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 04.04.2012, 13:43
  3. Action Replay GBA/ SP
    Von hardfire im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 0
    Letzter Beitrag: 05.02.2008, 16:57
  4. Action Problem
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 09.12.2007, 17:51
  5. 2 <form action> mit einem Button
    Von Thomy im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 06.02.2005, 22:57

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •