Free Buttons HTML and CSS styles

<button class="cottoncandy">
  <span>Job openings</span>
</button>

<style>
  .cottoncandy {
    align-items: center;
    background-color: initial;
    background-image: linear-gradient(100deg, #40ddff -6.08%, #7612fa 25.08%, #fa12e3);
    border: unset;
    border-image: unset unset unset unset unset;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, .15) 0 0 0 1px inset;
    color: #fff;
    column-gap: 6px;
    display: inline-flex;
    font-size: 18px;
    font-weight: 700;
    isolation: isolate;
    justify-content: center;
    line-height: 28px;
    padding: 12px 24px;
    position: relative;
    row-gap: 6px;
    transition: box-shadow .2s;
    transition-behavior: normal;
    will-change: box-shadow;
  }

  .cottoncandy:active, .cottoncandy:focus, .cottoncandy:hover {
    background-color: initial;
    background-image: linear-gradient(100deg, #40ddff -6.08%, #7612fa 25.08%, #fa12e3);
    background-position: unset unset;
    cursor: pointer;
  }

  .cottoncandy::after, .cottoncandy::before {
    all: initial;
    background-color: initial;
    block-size: 100%;
    content: "";
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    mix-blend-mode: overlay;
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }

  .cottoncandy::before {
    background-image: radial-gradient(circle at 50% 150%, #fff 20%, rgba(255, 255, 255, 0) 80%);
    transform: translateX(46%);
    transition: opacity .6s ease-in, transform .1s linear;
    transition-behavior: normal, normal;
  }

  .cottoncandy::after {
    background-image: linear-gradient(90deg, transparent, transparent 30%, #fff 50%, transparent 70%, transparent);
    transform: skew(-20deg, 0deg) translateX(-50%);
  }

  .cottoncandy:hover::before {
    opacity: .4;
  }

  .cottoncandy:active {
    box-shadow: rgba(0, 0, 0, .15) 0 0 0 1px inset;
  }

  .cottoncandy:active::before {
    opacity: 0;
  }

  .cottoncandy:active::after {
    animation: ShinyButton_glimmer__BU0in .5s linear forwards;
    animation-range-end: normal;
    animation-range-start: normal;
    animation-timeline: auto;
  }
</style>
Cotton Candy

Characteristics:
