hover.diff

--- a/material-button-types.framerfx/code/MaterialButton.tsx
+++ b/material-button-types.framerfx/code/MaterialButton.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useState } from 'react'
 import { Frame, useCycle, addPropertyControls, ControlType } from 'framer'
 import './fonts.css'

@@ -7,11 +8,13 @@ import './fonts.css'
 window.log = console.log

 export function MaterialButton(props) {
+  const [hover, setHover] = useState(false)
   log('props', props)
+  log('hover', hover)
   if (props.type == 'text')
     return (
       <Frame
-        background=""
+        background={hover ? '#F4F1F9' : ''}
         width="100%"
         height="100%"
         style={{
@@ -20,7 +23,11 @@ export function MaterialButton(props) {
           fontFamily: 'Roboto',
           fontWeight: 500,
           letterSpacing: 1.1,
+          cursor: 'pointer',
+          borderRadius: 4,
         }}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
       >
         {props.text}
       </Frame>
@@ -28,7 +35,7 @@ export function MaterialButton(props) {
   else if (props.type == 'outlined')
     return (
       <Frame
-        background=""
+        background={hover ? '#F4F1F9' : ''}
         width="100%"
         height="100%"
         style={{
@@ -39,7 +46,10 @@ export function MaterialButton(props) {
           letterSpacing: 1.1,
           border: '1px solid #B0B0B0',
           borderRadius: 4,
+          cursor: 'pointer',
         }}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
       >
         {props.text}
       </Frame>
@@ -47,7 +57,7 @@ export function MaterialButton(props) {
   else if (props.type == 'contained')
     return (
       <Frame
-        background="#6221EA"
+        background={hover ? '#6E32EC' : '#6230E6'}
         width="100%"
         height="100%"
         style={{
@@ -57,7 +67,14 @@ export function MaterialButton(props) {
           fontWeight: 500,
           letterSpacing: 1.1,
           borderRadius: 4,
+          boxShadow: hover
+            ? '0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0,0,0,.12)'
+            : '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',
         }}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
       >
         {props.text}
       </Frame>