add-circle.diff

--- a/material-button-types.framerfx/code/MaterialButton.tsx
+++ b/material-button-types.framerfx/code/MaterialButton.tsx
@@ -9,6 +9,20 @@ window.log = console.log

 export function MaterialButton(props) {
   const [hover, setHover] = useState(false)
+
+  const Circle = () => {
+    return (
+      <Frame
+        name="Circle"
+        width="100px"
+        height="100px"
+        borderRadius="100px"
+        background={props.type == 'contained' ? '#9163F0' : '#E4D9F9'}
+        center
+      />
+    )
+  }
+
   if (props.type == 'text')
     return (
       <Frame
@@ -23,11 +37,15 @@ export function MaterialButton(props) {
           letterSpacing: 1.1,
           cursor: 'pointer',
           borderRadius: 4,
+          overflow: 'hidden',
         }}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
       >
-        {props.text}
+        <Circle />
+        <Frame width="100%" height="100%" background="">
+          {props.text}
+        </Frame>
       </Frame>
     )
   else if (props.type == 'outlined')
@@ -45,11 +63,15 @@ export function MaterialButton(props) {
           border: '1px solid #B0B0B0',
           borderRadius: 4,
           cursor: 'pointer',
+          overflow: 'hidden',
         }}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
       >
-        {props.text}
+        <Circle />
+        <Frame width="100%" height="100%" background="">
+          {props.text}
+        </Frame>
       </Frame>
     )
   else if (props.type == 'contained')
@@ -70,11 +92,15 @@ export function MaterialButton(props) {
             : '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.1)',
           transition: '0.3s box-shadow ease',
           cursor: 'pointer',
+          overflow: 'hidden',
         }}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
       >
-        {props.text}
+        <Circle />
+        <Frame width="100%" height="100%" background="">
+          {props.text}
+        </Frame>
       </Frame>
     )
 }