Button text swapper for Unfollow button

src/components/account.jsx

@@ -190,7 +190,8 @@ function Account({ account }) {
               {relationshipUIState !== 'loading' && relationship && (
                 <button
                   type="button"
-                  class={`${following ? 'light danger' : ''}`}
+                  class={`${following ? 'light' : ''} swap`}
+                  data-swap-state="danger"
                   disabled={relationshipUIState === 'loading'}
                   onClick={() => {
                     setRelationshipUIState('loading');
@@ -218,7 +219,15 @@ function Account({ account }) {
                     })();
                   }}
                 >
-                  {following ? 'Unfollow…' : 'Follow'}
+                  {following ? (
+                    <>
+                      <span>Following</span>
+                      <span>Unfollow…</span>
+                    </>
+                  ) : (
+                    'Follow'
+                  )}
+                  {/* {following ? 'Unfollow…' : 'Follow'} */}
                 </button>
               )}
             </p>

src/index.css

@@ -172,6 +172,31 @@ button,
   border-radius: 0;
 }
 
+:is(button, .button).swap {
+  display: grid;
+  /* 1 column, 1 row */
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+:is(button, .button).swap > * {
+  grid-column: 1;
+  grid-row: 1;
+  transition: opacity 0.3s;
+}
+:is(button, .button).swap > *:nth-child(2) {
+  opacity: 0;
+}
+:is(button, .button).swap:hover > *:nth-child(2) {
+  opacity: 1;
+}
+:is(button, .button).swap[data-swap-state='danger']:hover {
+  color: var(--red-color);
+  border-color: var(--red-color);
+}
+:is(button, .button).swap:hover > *:nth-child(1) {
+  opacity: 0;
+}
+
 input[type='text'],
 textarea,
 select {