Aki UI

続きを読む

Read more button with animation on hover with Tailwind CSS and Framer Motion

Hover me

Before start please make sure you follow instructions1

Install the following dependencies:2

npm install framer-motion

Copy and paste the following code into a new component file:3

import { motion, HTMLMotionProps } from 'framer-motion';

import { cn } from '@/lib/utils';

export function ReadMore({className, ...props }: HTMLMotionProps<'div'>){

const parentVariants = {

hover: {

scale: 1.1

initial: {

scale: 1

}

Change duration of spin animation in tailwind.config.ts4

theme: {   extend: {       animation: {           spin: 'spin 8s linear infinite',       }    }}

How to use it5

"use client"

import { ReadMore } from "@/components/readmorebtn"

export default function Page() {

return(

)

}

Name	Default	Description
className	border-[2.5px] border border-black w-[120px] h-[120px] rounded-full flex justify-center items-center relative cursor-pointer bg-white	string The CSS class to be applied to the component.
props	—	HTMLMotionProps<'div'> Props to be applied to the component.

Name

Default

Description

className

border-[2.5px] border border-black w-[120px] h-[120px] rounded-full flex justify-center items-center relative cursor-pointer bg-white

string

The CSS class to be applied to the component.

props

—

HTMLMotionProps<'div'>

Props to be applied to the component.