Bräuchte hilfe bei "buttons" auf meiner Website

Ich arbeite an einer Website und habe auf einer anderen etwas gesehen was ich gut fand, und nun möchte ich dies auf meiner auch haben. Eine Information am Rande, ich arbeite mir Jimdo wo nicht jeder code funktioniert speziell <style> nicht (glaub ich). Also hätte da den code von der Website herauskopiert, falls das jemanden hilft. Ach ja es ist auch Javascript dabei :-D. Ich selber bin ein noob im Scripten und programmieren, kann nur Basics.

Der hier verwendete Code

<style> body{ background:grey;} #div1{ margin:0 auto; height:153px; width:266px; border:2px solid white; background:lightgrey;} h3{ text-align:center; width:100%; } #out{ } #in{ background-image: url(https://www.autohaus-grufeneder.at/++theme++poi.plonetheme.hdlint/++resource++poi.plonetheme.hdlint/sprites/icons_leistungen.svg); background-position: 0px -93px; background-size: 460px 740px; display: inline-block; margin-top:30px; height:40px; width:50px; margin-left:calc(50% - 25px); } #div1:hover{ background:#f93;} #div1:hover >span #in{ background-position: 0px -93px; background-size: 460px 646px;} #div1:hover div > h3{ color:white;} h3{ text-align:center; color:black; font-weight:500;} #raus{ height:120px; margin-top:-50px; overflow:hidden; border:2px solid red; display:block; background:#123456; color:white; padding:20px; text-align:center; transform:rotateX(90deg); transition:all 1s; } input{ display:none; margin:0; padding:0; } #rausradio:checked ~ a >label >#out >#raus{ display:block; margin-top:40px; transform:rotateX(0deg); } #rausradio:checked ~ a > label #in,#rausradio:checked ~ a > label h3{ color:red; } </style> <body><div id="div1"> <input id="rausradio" type="checkbox"> <a href="#"> <label for="rausradio"> <div id="out"> <span id="in"></span> <h3>Reifenangebot</h3> <div id="raus"> <span> Dieser Text wird angezeigt wenn man af den Button klickt</span> </div> </div> </label></a> </div>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!