diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
index 697720b3c35..1e1a1cf4ba2 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx
@@ -223,10 +223,10 @@ export default class LogsCheatSheet extends PureComponent<
   onClickExample(query: CloudWatchQuery) {
     this.props.onClickExample(query);
   }
-
   renderExpression(expr: string, keyPrefix: string) {
     return (
-      <div
+      <button
+        type="button"
         className="cheat-sheet-item__example"
         key={expr}
         onClick={() =>
@@ -241,7 +241,7 @@ export default class LogsCheatSheet extends PureComponent<
         }
       >
         <pre>{renderHighlightedMarkup(expr, keyPrefix)}</pre>
-      </div>
+      </button>
     );
   }
 
diff --git a/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx b/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
index 94e53cef3bb..b6c75f526a4 100644
--- a/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
@@ -81,9 +81,14 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
     };
 
     return (
-      <div className="cheat-sheet-item__example" key={expr} onClick={(e) => onClick({ refId: 'A', expr })}>
+      <button
+        type="button"
+        className="cheat-sheet-item__example"
+        key={expr}
+        onClick={(e) => onClick({ refId: 'A', expr })}
+      >
         <code>{expr}</code>
-      </div>
+      </button>
     );
   }
 
diff --git a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
index c26952aae2d..9142be3e1f7 100644
--- a/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
@@ -35,12 +35,13 @@ const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => (
       <div className="cheat-sheet-item" key={index}>
         <div className="cheat-sheet-item__title">{item.title}</div>
         {item.expression ? (
-          <div
+          <button
+            type="button"
             className="cheat-sheet-item__example"
             onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
           >
             <code>{item.expression}</code>
-          </div>
+          </button>
         ) : null}
         <div className="cheat-sheet-item__label">{item.label}</div>
       </div>
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 5392c918b3c..1bfac398de9 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -139,7 +139,11 @@
 
 .cheat-sheet-item__example {
   margin: $space-xs 0;
-  cursor: pointer;
+  // element is interactive, clear button styles
+  text-align: left;
+  border: none;
+  background: transparent;
+  display: block;
 }
 
 .query-type-toggle {