diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index 90bfdec8..9318987d 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -120,20 +120,29 @@ function appendStyleSheet() {
       padding: 2px 1px;
     }
 
-    .heightmap-selection article > div > span.icon-cw:hover {
-      color: #000;
-    }
-
-    .heightmap-selection article > div > span.icon-cw:active {
-      color: #666;
-    }
-
     .heightmap-selection article > img {
       width: 100%;
       aspect-ratio: ${graphWidth}/${graphHeight};
       border-radius: 8px;
       object-fit: fill;
     }
+
+    .heightmap-selection article .regeneratePreview {
+      outline: 1px solid #bbb;
+      padding: 1px 3px;
+      border-radius: 4px;
+      transition: all 0.1s ease-in-out;
+    }
+
+    .heightmap-selection article .regeneratePreview:hover {
+      outline: 1px solid #666;
+    }
+
+    .heightmap-selection article .regeneratePreview:active {
+      outline: 1px solid #333;
+      color: #000;
+      transform: rotate(45deg);
+    }
   `;
 
   const style = document.createElement("style");
@@ -198,7 +207,7 @@ function insertEditorHtml() {
         <img src="${dataUrl}" alt="${name}" />
         <div>
           ${name}
-          <span data-tip="Regenerate preview" class="icon-cw"></span>
+          <span data-tip="Regenerate preview" class="icon-cw regeneratePreview"></span>
         </div>
       </article>`;
     })