Add new button + change copy

Author: emilkowalski

components/Snippets/BorderFade.js

@@ -1,7 +1,7 @@
 import { styled } from 'stitches.config.js';
 
 const Component = () => {
-  return <Wrapper>Hover me</Wrapper>;
+  return <Wrapper>Hover over me</Wrapper>;
 };
 
 const Wrapper = styled('a', {

components/Snippets/BorderMarker.js

@@ -3,7 +3,7 @@ import { styled } from 'stitches.config.js';
 const Component = () => {
   return (
     <Wrapper>
-      <span>Hover me</span>
+      <span>Hover over me</span>
     </Wrapper>
   );
 };

components/Snippets/CircleScaleButton.js

@@ -3,7 +3,7 @@ import { styled } from 'stitches.config.js';
 const Component = () => {
   return (
     <Wrapper>
-      <span>Hover me</span>
+      <span>Hover over me</span>
     </Wrapper>
   );
 };
@@ -39,7 +39,7 @@ const Wrapper = styled('a', {
     '&:before': {
       opacity: 1,
       transitionDuration: '.85s',
-      transform: 'translate3d(-50%,-50%,0) scale3d(1,1,1)'
+      transform: 'translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2)'
     },
 
     span: {
@@ -79,7 +79,7 @@ const exampleWrapper = styled("a", {
         "&:before": {
             opacity: 1,
             transitionDuration: ".85s",
-            transform: "translate3d(-50%,-50%,0) scale3d(1,1,1)",
+            transform: "translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2)",
         },
 
         span: {
@@ -125,7 +125,7 @@ const cssStyling = `
 .exampleBtn:hover::before {
     opacity: 1;
     transition-duration: .85s;
-    transform: translate3d(-50%,-50%,0) scale3d(1,1,1)
+    transform: translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2);
 }
 `;
 
@@ -166,7 +166,7 @@ const scssStyling = `
 		&:before {
 			opacity: 1;
 			transition-duration: .85s;
-			transform: translate3d(-50%,-50%,0) scale3d(1,1,1)
+			transform: translate3d(-50%,-50%,0) scale3d(1.2,1.2,1.2);
 		}
 	}
 }

components/Snippets/HorizontalOverlay.js

@@ -3,7 +3,7 @@ import { styled } from 'stitches.config.js';
 const Component = () => {
   return (
     <Wrapper>
-      <span>Hover me</span>
+      <span>Hover over me</span>
     </Wrapper>
   );
 };

components/Snippets/OverlayLeft.js

@@ -3,7 +3,7 @@ import { styled } from 'stitches.config.js';
 const Component = () => {
   return (
     <Wrapper>
-      <span>Hover me</span>
+      <span>Hover over me</span>
     </Wrapper>
   );
 };

components/Snippets/PressDownButton.js

@@ -1,7 +1,7 @@
 import { styled } from 'stitches.config.js';
 
 const Component = () => {
-  return <Wrapper>Hover me</Wrapper>;
+  return <Wrapper>Hover over me</Wrapper>;
 };
 
 const Wrapper = styled('a', {

components/Snippets/ScalePseudo.js

@@ -0,0 +1,104 @@
+import { styled } from 'stitches.config.js';
+
+const Component = () => {
+  return <Wrapper>Hover over me</Wrapper>;
+};
+
+const Wrapper = styled('a', {
+  padding: '12px 24px',
+  color: '$black',
+  transition: 'transform 0.15s',
+  cursor: 'pointer',
+  position: 'relative',
+  zIndex: 1,
+
+  '&:after': {
+    content: '',
+    backgroundColor: 'white',
+    transition: 'transform 0.15s',
+    borderRadius: 7,
+    position: 'absolute',
+    inset: 0,
+    zIndex: '-1'
+  },
+
+  '&:hover:after': {
+    transform: 'scale(1.1)'
+  }
+});
+
+const stitchesStyling = `
+const exampleWrapper = styled("a", {
+  padding: '12px 24px',
+  color: 'black',
+  transition: 'transform 0.15s',
+  cursor: 'pointer',
+  position: 'relative',
+  zIndex: 1,
+	
+  '&:after': {
+    content: '',
+    backgroundColor: 'white',
+    transition: 'transform 0.15s',
+    borderRadius: 7,
+    position: 'absolute',
+    inset: 0,
+    zIndex: '-1'
+  },
+
+  '&:hover:after': {
+    transform: 'scale(1.1)'
+  }
+});`;
+
+const cssStyling = `
+.exampleClass {
+	padding: 12px 24px;
+	color: black;
+	transition: transform 0.15s;
+	cursor: pointer;
+	position: relative;
+	z-index: 1;
+}
+
+.exampleClass::after {
+	content: '';
+    background-color: white;
+    transition: transform 0.15s;
+    border-radius: 7px;
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+}
+
+.exampleClass:hover::after {
+	transform: scale(1.1);
+}
+`;
+
+const scssStyling = `
+.exampleClass {
+	padding: 12px 24px;
+	color: black;
+	transition: transform 0.15s;
+	cursor: pointer;
+	position: relative;
+	z-index: 1;
+
+	&:after {
+		content: '';
+		background-color: white;
+		transition: transform 0.15s;
+		border-radius: 7px;
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+	}
+
+	&:hover::after {
+		transform: scale(1.1);
+	}
+}
+`;
+
+export { stitchesStyling, cssStyling, scssStyling, Component };

components/Snippets/Swing.js

@@ -1,7 +1,7 @@
 import { styled, keyframes } from 'stitches.config.js';
 
 const Component = () => {
-  return <Wrapper>Hover me</Wrapper>;
+  return <Wrapper>Hover over me</Wrapper>;
 };
 
 const swing = keyframes({

components/Snippets/UnderlineLeftRight.js

@@ -1,7 +1,7 @@
 import { styled } from 'stitches.config.js';
 
 const Component = () => {
-  return <Wrapper>Hover me</Wrapper>;
+  return <Wrapper>Hover over me</Wrapper>;
 };
 
 const Wrapper = styled('a', {

components/Snippets/index.js

@@ -11,6 +11,7 @@ import * as BorderFade from './BorderFade';
 import * as TextTransformX from './TextTransformX';
 import * as CircleScaleButton from './CircleScaleButton';
 import * as ThreeDotsLoader from './ThreeDotsLoader';
+import * as ScalePseudo from './ScalePseudo';
 
 const allSnippets = [
   UnderlineLeftRight,
@@ -25,7 +26,8 @@ const allSnippets = [
   BorderFade,
   TextTransformX,
   CircleScaleButton,
-  ThreeDotsLoader
+  ThreeDotsLoader,
+  ScalePseudo
 ];
 
 export default allSnippets;