Contact Details Reveal

1import "./styles.css";2
3export function ContactDetailsReveal() {4  return (5    <button type="button" className="contact-details-reveal">6      <span className="contact-details-reveal__dot" aria-hidden="true" />7      <span className="contact-details-reveal__content">8        <span className="contact-details-reveal__title">Contact us</span>9        <span className="contact-details-reveal__detail">hello@contactus.com</span>10      </span>11    </button>12  );13}

1.contact-details-reveal,2.contact-details-reveal * {3  box-sizing: border-box;4}5.contact-details-reveal {6  appearance: none;7  position: relative;8  display: inline-flex;9  width: min(190px, calc(100vw - 40px));10  height: 54px;11  align-items: center;12  justify-content: center;13  overflow: hidden;14  border: 0;15  background: transparent;16  padding: 0;17  color: light-dark(#14181e,#f7f7fa);18  font-family: Arial, Helvetica, sans-serif;19  text-align: left;20  cursor: pointer;21}22.contact-details-reveal__dot {23  position: relative;24  flex: none;25  width: 14px;26  height: 14px;27  border-radius: 50%;28  background: light-dark(#14181e,#f7f7fa);29  transform: translate(18px, 0);30  transition: background-color .32s ease, transform .42s cubic-bezier(.16, 1, .3, 1);31}32.contact-details-reveal__content {33  position: relative;34  width: 145px;35  height: 46px;36  margin-left: 15px;37  transform: translateX(18px);38}39.contact-details-reveal__title,40.contact-details-reveal__detail {41  position: absolute;42  left: 0;43  white-space: nowrap;44}45.contact-details-reveal__title {46  top: 50%;47  font-size: 19px;48  font-weight: 400;49  letter-spacing: -.55px;50  line-height: 1;51  transform: translateY(-50%);52  transition: top .42s cubic-bezier(.16, 1, .3, 1), transform .42s cubic-bezier(.16, 1, .3, 1);53}54.contact-details-reveal__detail {55  top: 30px;56  color: light-dark(#868f9c,#77777d);57  font-size: 12px;58  font-weight: 400;59  letter-spacing: -.2px;60  line-height: 1;61  opacity: 0;62  transform: translateY(15px);63  transition: opacity .24s ease .05s, transform .42s cubic-bezier(.16, 1, .3, 1);64}65.contact-details-reveal:hover .contact-details-reveal__dot,66.contact-details-reveal:focus-visible .contact-details-reveal__dot {67  background: #f97316;68  transform: translate(18px, 4px);69}70.contact-details-reveal:hover .contact-details-reveal__title,71.contact-details-reveal:focus-visible .contact-details-reveal__title {72  top: 6px;73  transform: translateY(0);74}75.contact-details-reveal:hover .contact-details-reveal__detail,76.contact-details-reveal:focus-visible .contact-details-reveal__detail {77  opacity: 1;78  transform: translateY(0);79}80.contact-details-reveal:focus-visible {81  border-radius: 8px;82  outline: 2px solid #f97316;83  outline-offset: 4px;84}85@media (prefers-reduced-motion: reduce) {86  .contact-details-reveal__dot,87  .contact-details-reveal__title,88  .contact-details-reveal__detail {89  transition: none;90}91}