btn-creative-top

1'use client';
2 
3import React from 'react';
4 
5function ButtonCreativeTop() {
6  return (
7    <>
8      <div className='group relative cursor-pointer p-2 w-32 border bg-white rounded-full overflow-hidden text-black text-center font-semibold'>
9        <span className='translate-y-0 group-hover:-translate-y-12 group-hover:opacity-0 transition-all duration-300 inline-block'>
10          Our Work
11        </span>
12        <div className='flex gap-2 text-white bg-green-400 z-10 items-center absolute left-0 top-0 h-full w-full justify-center translate-y-12 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 rounded-full group-hover:rounded-none '>
13          <span>Our Work</span>
14        </div>
15      </div>
16    </>
17  );
18}
19 
20export default ButtonCreativeTop;