Sticky Buttons

<div id="sticky-wrap"> <div class="sticky"> <a href="#kontakt"> <i class="fa-solid fa-comments" aria-hidden="true"></i> <!-- Hier die Icons anpassen --> <span class="sticky-text">kontaktformular</span> </a> </div> <div class="sticky "> <a href="mailto:mail@mustermann.de" target="_blank"> <i class="fa-solid fa-envelope" aria-hidden="true"></i> <!-- Hier die Icons anpassen --> <span class="sticky-text">mail@mustermann.de</span> </a> </div> <div class="sticky "> <a href="tel:030357891" target="_blank"> <i class="fa-solid fa-phone" aria-hidden="true"></i> <!-- Hier die Icons anpassen --> <span class="sticky-text">030357891</span> </a> </div> </div>

#sticky-wrap i { position:absolute; left:22px; top:50%; transform:translateY(-50%); color: #fff; /* Iconfarbe*/ } #sticky-wrap { position:fixed; top:50%; transform:translateY(-50%); display:flex; right:0; flex-direction:column; align-items:flex-end; pointer-events:none; } .sticky { position:relative; width:max-content; background:#250878; /* Hintergrundfarbe*/ margin-top:30px; padding: 15px 20px 15px 69px; transform: translateX(calc(100% - 66px)); transition:transform .4s; pointer-events:auto; } .sticky:first-child { margin-top:0; } #sticky-wrap .sticky a { color:#fff; /* Textfarbe*/ text-decoration:none; font-family:inherit; font-size:1.1em; } #sticky-wrap .sticky:hover { transform:translateX(0); } @media (max-width:768px){ #sticky-wrap { top:auto; transform: none; bottom:30px; } } @media only screen and (max-height: 500px) and (orientation: landscape) { #sticky-wrap { display: none !important; } }