Aurora Download Button

1import "./aurora-download-button.css";2
3export function AuroraDownloadButton() {4  return (5    <button type="button" className="aurora-download-button">6      <span className="aurora-download-button__rim" aria-hidden="true">7        <span className="aurora-download-button__rim-highlight" />8      </span>9      <span className="aurora-download-button__hover-bloom" aria-hidden="true" />10      <svg className="aurora-download-button__icon" width="20" height="20" viewBox="0 0 384 512" fill="currentColor" aria-hidden="true">11        <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5c0 26.2 4.8 53.3 14.4 81.2 12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.7-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.6-91.9zM261.1 104.5c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />12      </svg>13      <span className="aurora-download-button__label">Get for Mac</span>14    </button>15  );16}

1.aurora-download-button,2.aurora-download-button * {3  box-sizing: border-box;4}5.aurora-download-button {6  position: relative;7  display: flex;8  width: fit-content;9  align-items: center;10  gap: 6px;11  overflow: hidden;12  border: 0;13  border-radius: 10px;14  background:15    radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 100%),16    radial-gradient(114.65% 114.65% at 9.73% 17.27%, rgb(30, 130, 224) 0, rgb(28, 56, 234) 100%);17  background-blend-mode: overlay, normal;18  box-shadow:19    rgba(0, 0, 0, .28) 0 10px 18px,20    rgba(191, 229, 251, .4) -3px -3px 4px inset,21    rgba(19, 26, 228, .1) 4px 4px 4px inset;22  padding: 10px 20px;23  color: #fff;24  font-family: var(--font-geist-sans, Geist), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;25  font-size: 16px;26  font-weight: 500;27  line-height: 1;28  letter-spacing: -.13px;29  cursor: pointer;30  transition: transform .16s ease-out;31}32.aurora-download-button__hover-bloom {33  position: absolute;34  z-index: 0;35  inset: 1px;36  border-radius: inherit;37  background: radial-gradient(101.79% 101.79% at 65.61% 81.79%, rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 100%);38  mix-blend-mode: overlay;39  opacity: 0;40  pointer-events: none;41  transition: opacity .3s ease-in-out;42}43.aurora-download-button__rim {44  position: absolute;45  z-index: 20;46  inset: 0;47  filter: blur(1px);48  pointer-events: none;49}50.aurora-download-button__rim-highlight {51  position: absolute;52  top: -1px;53  left: -1px;54  width: 100%;55  height: 100%;56  border-radius: 10px;57  background: linear-gradient(176.87deg, rgba(255, 255, 255, .5) 8.56%, rgba(255, 255, 255, 0) 85.04%);58  padding: 3px;59  opacity: .45;60  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);61  -webkit-mask-composite: xor;62  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);63  mask-composite: exclude;64}65.aurora-download-button__icon,66.aurora-download-button__label {67  position: relative;68  z-index: 1;69}70.aurora-download-button__icon {71  flex: 0 0 auto;72}73@media (min-width: 768px) {74  .aurora-download-button,75  .aurora-download-button__rim-highlight {76  border-radius: 12px;77}78}79@media (hover: hover) {80  .aurora-download-button:hover {81  transform: scale(1.03);82}83  .aurora-download-button:hover .aurora-download-button__hover-bloom {84  opacity: .4;85}86}87.aurora-download-button:focus-visible {88  outline: 2px solid #fff;89  outline-offset: 4px;90  transform: scale(1.03);91}92.aurora-download-button:focus-visible .aurora-download-button__hover-bloom {93  opacity: .4;94}95.aurora-download-button:active {96  transform: scale(.97);97}98@media (prefers-reduced-motion: reduce) {99  .aurora-download-button,100  .aurora-download-button__hover-bloom {101  transition-duration: .01ms;102}103}