How can I implement the lines shown around the "enter" button

I am creating a react portfolio using some designs I made on Figma. My goal is to replicate the enter button shown below where the two lines are split by the word "enter". Is there a way to make this work using tailwind css? Here's my code below:
import React from 'react'

const Button = () => {
return (
<div className='w-auto h-auto flex justify-center relative bottom-20'>
<button className='w-28 h-22 text-xl tracking-widest font-libre'>ENTER</button>
</div>
)
}

export default Button
import React from 'react'

const Button = () => {
return (
<div className='w-auto h-auto flex justify-center relative bottom-20'>
<button className='w-28 h-22 text-xl tracking-widest font-libre'>ENTER</button>
</div>
)
}

export default Button
No description
3 Replies
Mannix
Mannix•14mo ago
<div className="w-auto h-auto flex justify-center relative bottom-20">
<button className="before:inline-block before:content-['\2014'] before:absolute before:-left-0 relative w-28 h-22 text-xl tracking-widest font-libre after:inline-block after:content-['\2014'] after:absolute">ENTER</button>
</div>
<div className="w-auto h-auto flex justify-center relative bottom-20">
<button className="before:inline-block before:content-['\2014'] before:absolute before:-left-0 relative w-28 h-22 text-xl tracking-widest font-libre after:inline-block after:content-['\2014'] after:absolute">ENTER</button>
</div>
best i can think of atm
roycwilliams
roycwilliams•14mo ago
Thank you @Mannix
Mannix
Mannix•14mo ago
yw 🙂 thumbup
Want results from more Discord servers?
Add your server