replace button with slider

data/pages.yaml

@@ -211,6 +211,7 @@ buttons:
   learn_more: Learn more
   archive: Visit the archive
 feedback: <i class="fas fa-comments"></i> Got thoughts or feedback on the new documentation landing pages? We want to hear from you! <br /> Join us in the <a href="https://matrix.to/#/#docs:ansible.com" target="_blank">docs channel on Matrix</a> or open a <a href="https://github.com/ansible/docsite/issues" target="_blank">GitHub issue</a> in the docsite repository.
+take_me_back: Restore the old docsite.
 # Translations
 translations:
   core_ja:

oldsite/ansible-prior-versions.html

@@ -11,6 +11,7 @@
     <meta name="author" content="Ansible, Inc.">
     <link href="https://static.redhat.com/libs/redhat/redhat-font/2.0.0/webfonts/red-hat-font.css" rel="stylesheet">
     <link rel="stylesheet" href="https://www.ansible.com/hubfs/css/styles.min.css" />
+    <link rel="stylesheet" href="static/css/toggle.css"/>
 
     <!-- <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -248,6 +249,17 @@
                     <h1 class="mb-2">Ansible Community Documentation</h1>
                     <p class="subhead">Archived versions</p>
                 </div>
+                <div class="col text-md-center">
+                  <p class="toggle">
+                    We're building a new set of documentation landing pages and want to hear from you!
+                    Join us in the <a href="https://matrix.to/#/#docs:ansible.com" target="_blank">docs channel on Matrix</a> or open a <a href="https://github.com/ansible/docsite/issues" target="_blank">GitHub issue</a> in the docsite repository and give us your feedback.<br/>
+                    Try out the new Ansible docsite.<br/>
+                    <label class="switch" id="page-toggle">
+                      <input type="checkbox">
+                      <span class="slider round"></span>
+                    </label>
+                  </p>
+                </div>
             </div>
         </div>
     </header>
@@ -379,6 +391,8 @@ <h4 class="card-title">Headline</h4>
     </section>
     <!-- END RESOURCES SECTION - SEE '.resources' CSS RULE TO TOGGLE OFF -->
 
+    <script src="static/js/toggle.js"></script>
+
     <!-- BEGIN FOOTER -->
     <section class="footer py-0">
         <iframe src="https://www.ansible.com/docs-footer" scrolling="no"></iframe>