Auf Thema antworten

Beitrag

[QUOTE="melojezzed, post: 14426, member: 4407"]
Hallo zusammen, 
ich mache mir eine neue Seite und finde diesen Button mega schön: ttps://codepen.io/avstorm/pen/oqKbL

Den SCSS Code habe ich CSS geändert:
$color: #111;
$primary: #FFAB9D;

html, body {
  height: 100%;
}

body {
  display: grid;
  font-family: Avenir, sans-serif;
  color: $color;
}

a {
  text-decoration: none;
  color: inherit;
}

.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all .2s ease;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 28px;
  background: rgba($primary,.5);
  width: 56px;
  height: 56px;
  transition: all .3s ease;
}

.cta span {
    position: relative;
    font-size: 16px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: .25em;
    text-transform: uppercase;
    vertical-align: middle;
}

.cta svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none; 
    stroke-linecap: round; 
    stroke-linejoin : round; 
    stroke : $color; 
    stroke-width :2; 
    transform : translateX(-5px); 
    transition : all .3s ease; 
}

.cta:hover:before {
   width :100%; 
   background :rgba($primary,1);
}

.cta:hover svg {
   transform : translateX(0);
}

.cta:active {
   transform : scale(.96);
}

Trotzdem sieht der Button nicht so aus wie gewünscht. Ich nutze zwar Wordpress und Elementor, aber ich versucht den Code rein mit HTML und CSS zu erzeugen, so wie in dem Beispiel. Was mache ich falsch?

Vielen Dank fürs Feedback!
[/QUOTE]

Authentifizierung