WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Button Hover
912
ledoc
Open In Editor
Publish Your Code
Recommended
28 January 2025
button
13 April 2024
HTML CSS Toggle Button
30 August 2024
Neon button
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
