WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Schaltfläche Hover
1190
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
7 August 2025
Div beim Klicken auf die Schaltfläche ausblenden: Animation starten
1 December 2024
Hover-Effekt für Call-Action-Buttons
14 September 2024
Hover-Schieberegler (dunkel/hell)
HTML
Copy
<div id="outer"> <div class="button_slide slide_down">BUTTON: SLIDE DOWN </div> <br /> <br /><br /> <div class="button_slide slide_right">BUTTON: SLIDE RIGHT </div> <br /> <br /><br /> <div class="button_slide slide_left">BUTTON: SLIDE INSIDE </div> <br /> <br /><br /> <div class="button_slide slide_diagonal">BUTTON: SLIDE DIAGONAL </div> <br /> <br /><br /> </div>
CSS
Copy
height: 100%; } body { height: 100%; margin: 0; background: #162944; } .button_slide { color: #FFF; border: 2px solid rgb(216, 2, 134); border-radius: 0px; padding: 18px 36px; display: inline-block; font-family: "Lucida Console", Monaco, monospace; font-size: 14px; letter-spacing: 1px; cursor: pointer; box-shadow: inset 0 0 0 0 #D80286; -webkit-transition: ease-out 0.4s; -moz-transition: ease-out 0.4s; transition: ease-out 0.4s; } .slide_down:hover { box-shadow: inset 0 100px 0 0 #D80286; } .slide_right:hover { box-shadow: inset 400px 0 0 0 #D80286; } .slide_left:hover { box-shadow: inset 0 0 0 50px #D80286; } .slide_diagonal:hover { box-shadow: inset 400px 50px 0 0 #D80286; } #outer { width: 364px; margin: 50px auto 0 auto; text-align: center; }
JS
Copy
