Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
body { background-color: #1E314F; font-family: "Helvetica Rounded", "Arial Rounded MT Bold", "Montserrat", sans-serif; color: #fff; } .qatoggleWrapper { position: absolute; top: 50%; left: 50%; overflow: hidden; padding: 0 200px; transform: translate3d(-50%, -50%, 0); } .qatoggleWrapper input { position: absolute; left: -99em; } .qatoggle { cursor: pointer; display: inline-block; position: relative; width: 90px; height: 50px; background-color: #83D8FF; border-radius: 84px; transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } .qatoggle:before { content: "Ask a question"; position: absolute; left: -150px; top: 15px; font-size: 18px; } .qatoggle:after { content: "Start a discussion"; position: absolute; right: -170px; top: 15px; font-size: 18px; color: #749ED7; } .qatoggle__handler { display: inline-block; position: relative; z-index: 1; top: 3px; left: 3px; width: 44px; height: 44px; background-color: #FFCF96; border-radius: 50px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transform: rotate(-45deg); } input:checked + .qatoggle { background-color: #749DD6; } input:checked + .qatoggle:before { color: #749ED7; } input:checked + .qatoggle:after { color: #ffffff; } input:checked + .qatoggle .qatoggle__handler { background-color: #FFE5B5; transform: translate3d(40px, 0, 0) rotate(0); }