Kevin Powell - Community•15mo ago

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

3 Replies

Mannix•15mo 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

roycwilliamsOP•15mo ago

Thank you @Mannix

Mannix•15mo ago

yw 🙂

Gaming

Programming

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