"Button Toggle Jquery and Css3 Siberci"
Bootstrap 4.1.1 Snippet by siberci

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <!--Ahmet Kaptan Siberci.com--> <script type="text/javascript"> <!--Ahmet Kaptan Siberci.com--> function MsToggle() { $("#Text").toggle(500); $("#Text").slideDown.delay(10000).fadein(10000); $("#Text").animate } </script> <style> .divInside{ /*background-color:rgba(234,11,140,0.5);*/ display:none; color:black; background-color:white; font-size:large; font-family:'Comic Sans MS'; } #divOutside{ width:100%; height:auto; background-color:violet; padding:5px; border-radius:5px; margin:5px; } .Show{ font:large; font-family:'Calisto MT'; box-shadow:3px 3px 3px #808080; backface-visibility:visible; border-radius:5px; } </style> <script src="~/scripts/bootstrap.js"></script> <script src="~/scripts/bootstrap.min.js"></script> </head> <body> <!--Ahmet Kaptan Siberci.com--> <h2>Toggle Script</h2> <br /> <input id="MsgToggle" value="Show Toggle Text" type="button" onclick="MsToggle()" class="Show" /> <br /> <div class="col-lg-12" id="divOutside"> <!--Ahmet Kaptan Siberci.com--> <div id="Text" class="divInside" > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </div> <!--Ahmet Kaptan Siberci.com--> </body> </html>

Related: See More

Rotating CSS Card
Hexa shape button
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)
Material toggle button

Questions / Comments: