Zum Inhalt

Button am Rand zum Ausfahren

Ich habe schon immer wieder öfter ein Plugin für WordPress gesucht, welches es mir erlaubt ein Button an den Rand der Seite zu platzieren, der beim rübergehen ausfährt und anklickbar ist. Es gibt diese PlugIns natürlich, aber bisher fand ich keines schlicht genug. Nun habe ich eine CSS basierte Lösung, die mich völlig zufrieden stellt. Das ist mit zwei einfachen Schritten erledigt:

Erst fügt ihr den Button in die header.php nach dem Öffnen des Body-Tags:

<div id="snav" class="en">
<ul>
<li> <a href="#" title="Jetzt buchen!"> <i class="fa fa-calendar"></i> <span>Jetzt buchen</span> </a> </li>
</ul>

und in die custom.css:

#snav.en {
  left: 0;
  text-align: left;
}

#snav.en li span { left: -100px; }

#snav.en li a:hover span { left: 35px; }

/* RTL CSS */


#snav.ar {
  right: 0;
  text-align: right;
}

#snav.ar li span { right: -100px; }

#snav.ar li a:hover span { right: 35px; }

/* main SideNav.css styles */


#snav {
  position: fixed;
  top: 20%;
  z-index: 9999;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
}

#snav ul { list-style: none; }

#snav * {
  margin: 0;
  padding: 0;
  outline: 0;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#snav li a {
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}

#snav .fa {
  vertical-align: middle;
  font-size: 18px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: relative;
  z-index: 4;
}

#snav li span {
    font-size: 18px;
    vertical-align: middle;
    height: 45px;
    line-height: 45px;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    padding: 0 15px;
    position: absolute;
    top: 0;
    visibility: hidden;
    z-index: 3;
}

#snav li a:hover .fa { transform: rotate(720deg); }

#snav li a:hover span { visibility: visible; }

/* colors styles */

/* menu items title background used for browsers not supporting :nth-child */


#snav li span { background-color: #555; }

/* icons color and background before hover  */


#snav li .fa {
    background-color: #18375E;
    color: #fff;
}

.gdlr-item-title-wrapper.pos-left .gdlr-item-title {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0px;
}

/* icons hover color */


#snav li a:hover .fa { color: #fff; }

/* repeated colors from 1 to 10 each hover color repeated after 10 menu items */


#snav li:nth-child(10n+1) span, #snav li:nth-child(10n+1) a:hover .fa {
    background-color: #fff;
    color: #18375E;
}

#snav li:nth-child(10n+2) span,
#snav li:nth-child(10n+2) a:hover .fa { background-color: #4EC5DB; }

#snav li:nth-child(10n+3) span,
#snav li:nth-child(10n+3) a:hover .fa { background-color: #3DC25D; }

#snav li:nth-child(10n+4) span,
#snav li:nth-child(10n+4) a:hover .fa { background-color: #99BE24; }

#snav li:nth-child(10n+5) span,
#snav li:nth-child(10n+5) a:hover .fa { background-color: #38c; }

#snav li:nth-child(10n+6) span,
#snav li:nth-child(10n+6) a:hover .fa { background-color: #ff0000; }

#snav li:nth-child(10n+7) span,
#snav li:nth-child(10n+7) a:hover .fa { background-color: #000; }

#snav li:nth-child(10n+8) span,
#snav li:nth-child(10n+8) a:hover .fa { background-color: #F1A111; }

#snav li:nth-child(10n+9) span,
#snav li:nth-child(10n+9) a:hover .fa { background-color: #777; }

#snav li:nth-child(10n+10) span,
#snav li:nth-child(10n+10) a:hover .fa { background-color: #30555C; }

Ich habe einfach ganz simple den kompletten Code genommen, dann läuft auch nichts schief. Optisch müsst ihr das natürlich noch anpassen, aber funktionieren tut es meiner Meinung nach ziemlich gut. Und sieht auch schick aus.

Veröffentlicht inCSS

Schreibe den ersten Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

20 − 3 =