Vebego Component Library

Back To Top 

<div id="back-to-top">
    <a href="">
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="46" stroke="url(#gradient)" stroke-width="8" stroke-linecap="round" />
            <defs>
                <radialGradient id="gradient" cx="1" cy="1" r="1.5">
                    <stop offset="0%" stop-color="#990D7F" />
                    <stop offset="100%" stop-color="#990D7F" />
                </radialGradient>
            </defs>
        </svg>
        <span class="atm-icon fa-light fa-arrow-up"></span>
    </a>
</div>
 
<div id="back-to-top">
    <a href="{{ url }}">
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="46" stroke="url(#gradient)" stroke-width="8" stroke-linecap="round" />
            <defs>
              <radialGradient id="gradient" cx="1" cy="1" r="1.5">
                <stop offset="0%" stop-color="#990D7F" />
                <stop offset="100%" stop-color="#990D7F" />
              </radialGradient>
            </defs>
          </svg>
          <span class="atm-icon fa-light fa-arrow-up"></span>
    </a>
</div>
 
{
  "url": "",
  "back": {
    "style": "fas",
    "icon": "fas-arrow-up"
  }
}
  • Content: 
    #back-to-top {
    @apply text-center cursor-pointer mb-2 !hidden md:!block;

    transition: transform 200ms;

    a {
        @apply flex items-center justify-center w-12 h-12 bg-[#F0CAE3] rounded-full text-white relative;

        svg {
            @apply h-full w-full absolute top-0;

            transform: rotate(-90deg);

            circle {
                stroke-dasharray: 1000;
                stroke-dashoffset: 1000;

                transition: stroke-dashoffset 3s ease;
            }
        }

        &:hover svg circle {
            stroke-dashoffset: 0;
        }

        .atm-icon {
            &:before {
                @apply text-secondary-col-1 fa-solid;
            }
        }
    }

    .paragraph {
        @apply text-sm lg:text-md;
    }
}
  • URL: /components/raw/back-to-top/back-to-top.css
  • Filesystem Path: src\components\03-molecules\back-to-top\back-to-top.css
  • Size: 811 Bytes

No notes defined.