CopyCopied!
module.exports = {
  theme: {
    extend: {
      animation: {
        buttonheartbeat: 'buttonheartbeat 2s infinite ease-in-out',
      },
      keyframes: {
        buttonheartbeat: {
          '0%': {
            'box-shadow': '0 0 0 0 theme("colors.red.500")',
            transform: 'scale(1)',
          },
          '50%': {
            'box-shadow': '0 0 0 7px theme("colors.red.500/0")',
            transform: 'scale(1.05)',
          },
          '100%': {
            'box-shadow': '0 0 0 0 theme("colors.red.500/0")',
            transform: 'scale(1)',
          },
        },
      },
    },
  },
}

CopyCopied!
import React from 'react'

const HeartbeatButton = () => {
  return (
    <div>
      <button className="m-9 animate-buttonheartbeat rounded-md bg-red-500 px-4 py-1 text-sm font-semibold text-white">
        SyntaxUI
      </button>
    </div>
  )
}

export default HeartbeatButton