rustdoc: use real buttons for scrape examples controls

3 files changed, 12 insertions, 3 deletions

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index 8731efb5e87..647eb69d9a6 100644
--- a/src/librustdoc/html/render/mod.rs
+++ b/src/librustdoc/html/render/mod.rs
@@ -2915,7 +2915,7 @@ fn render_call_locations(w: &mut Buffer, cx: &mut Context<'_>, item: &clean::Ite
         );
 
         if line_ranges.len() > 1 {
-            write!(w, r#"<span class="prev">&pr;</span> <span class="next">&sc;</span>"#);
+            write!(w, r#"<button class="prev">&pr;</button> <button class="next">&sc;</button>"#);
         }
 
         // Look for the example file in the source map if it exists, otherwise return a dummy span
diff --git a/src/librustdoc/html/sources.rs b/src/librustdoc/html/sources.rs
index 50135d60190..54e296959b0 100644
--- a/src/librustdoc/html/sources.rs
+++ b/src/librustdoc/html/sources.rs
@@ -287,8 +287,11 @@ pub(crate) fn print_src(
             }
         }
         SourceContext::Embedded { offset, needs_expansion } => {
-            extra =
-                if needs_expansion { Some(r#"<span class="expand">&varr;</span>"#) } else { None };
+            extra = if needs_expansion {
+                Some(r#"<button class="expand">&varr;</button>"#)
+            } else {
+                None
+            };
             for line_number in 1..=lines {
                 let line = line_number + offset;
                 writeln!(line_numbers, "<span>{line}</span>")
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index bf8c0397bc3..88c25f44d54 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1959,6 +1959,12 @@ in storage.js
 	top: 0.25em;
 	z-index: 1;
 	cursor: pointer;
+	padding: 0;
+	background: none;
+	border: none;
+	/* iOS button gradient: https://stackoverflow.com/q/5438567 */
+	-webkit-appearance: none;
+	opacity: 1;
 }
 .scraped-example .code-wrapper .prev {
 	right: 2.25em;