PhysicalButton.tsx

import React, { useState } from 'react';
import { Pressable, Text } from 'react-native';
import Animated, { css } from 'react-native-reanimated';

export default function PhysicalButton() {
  const [pressed, setPressed] = useState(false);

  return (
    <Pressable onPressIn={() => setPressed(true)} onPressOut={() => setPressed(false)}>
      <Animated.View style={[styles.button, pressed ? styles.animationDown : styles.animationUp]}>
        <Text style={styles.text}>CSS Button</Text>
      </Animated.View>
      <Animated.View style={styles.buttonBackground} />
    </Pressable>
  );
}

const styles = css.create({
  button: {
    backgroundColor: 'rgb(208, 49, 49)',
    padding: 20,
    borderRadius: 15,
  },
  buttonBackground: {
    backgroundColor:'rgb(165, 41, 41)',
    borderRadius: 15,
    width: 220,
    height: 40,
    transform: [{ translateY: -30 }],
    zIndex: -1,
  },
  text: {
    color: 'white',
    fontSize: 30,
    textAlign: 'center',
    fontWeight: 'bold',
  },

  animationDown: {
    animationDuration: 200,
    animationTimingFunction: 'easeIn',
    animationFillMode: 'forwards',
    animationName: {
      '0%': { transform: [{ translateY: 0 }] },
      '100%': { transform: [{ translateY: 7 }] },
    },
  },
  animationUp: {
    animationDuration: 200,
    animationTimingFunction: 'easeOut',
    animationFillMode: 'forwards',
    animationName: {
      '0%': { transform: [{ translateY: 7 }] },
      '100%': { transform: [{ translateY: 0 }] },
    },
  },
});