Preview in Browser Button

1import { ArrowRight } from "lucide-react";2
3export function PreviewInBrowserButton() {4  return (5    <button type="button" className="preview-browser-button">6      <span>Preview in browser</span>7      <span className="preview-browser-icon" aria-hidden="true">8        <ArrowRight className="preview-browser-arrow preview-browser-arrow-current" size={17} strokeWidth={2.4} />9        <ArrowRight className="preview-browser-arrow preview-browser-arrow-incoming" size={17} strokeWidth={2.4} />10      </span>11    </button>12  );13}

1.preview-browser-button {2  display: inline-flex;3  align-items: center;4  justify-content: center;5  gap: 8px;6  border: 1px solid #f0f0f0;7  border-radius: 999px;8  background: transparent;9  padding: 12px 24px;10  color: #f0f0f0;11  font-size: 16px;12  font-weight: 500;13}14.preview-browser-icon {15  position: relative;16  display: grid;17  width: 17px;18  height: 20px;19  place-items: center;20  overflow: hidden;21}22.preview-browser-arrow {23  position: absolute;24  transform: rotate(-45deg);25  transition: transform .5s cubic-bezier(.16, 1, .3, 1);26}27.preview-browser-arrow-incoming {28  transform: translate(-16px, 12px) rotate(-45deg);29}30.preview-browser-button:hover .preview-browser-arrow-current,31.preview-browser-button:focus-visible .preview-browser-arrow-current {32  transform: translate(16px, -12px) rotate(-45deg);33}34.preview-browser-button:hover .preview-browser-arrow-incoming,35.preview-browser-button:focus-visible .preview-browser-arrow-incoming {36  transform: translate(0, 0) rotate(-45deg);37}38.preview-browser-button:focus-visible {39  outline: 2px solid #f97316;40  outline-offset: 3px;41}