Action Button für Newsletter

JennyB

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:

Hab mal folgendes verbrochen

<a class="button" href="#">SHOP NOW   ></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

sketch.media

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{
[COLOR=#333333]font-family: 'Martel Sans', sans-serif;[/COLOR]
[COLOR=#333333]font-size: 18px;[/COLOR]
[COLOR=#333333]padding-left: 20px; [/COLOR]
[COLOR=#333333]padding-top: 5px; [/COLOR]
[COLOR=#333333]padding-bottom: 5px; [/COLOR]
[COLOR=#333333]border-size: 1px;[/COLOR]
[COLOR=#333333]border-radius: 0;[/COLOR]
}
.button.arrow:after{
content:'>';
padding-left: 20px;
padding-right: 9px;
}

Alles anzeigen

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/…rschoenern.html

Tags