Thin arrow inside circle using css (for use with React)

I found some interesting arrow inside circle, here it is -

[Codepen](https://codepen.io/SachaJolly/pen/oWQMoG)

I took this example from the website - https://freebiesupply.com/blog/css-arrows/
part Arrowed Link – Circle On Hover (cf Google Home Website)

I am not very experienced in css, so I couldn't correctly make the same arrow in my application. I tried different converters to usual css, but was't successful. Only I need is simply define this styles (or maybe there is another approach) and use it in JSX code.

Maybe do you have any ideas how to do it? Thank you!

2 answers

  • answered 2021-09-27 16:30 Egon Adelsberger

    Its best to use SVGs or icon font like material icons or fontawesome. They are best to work with, easy to manipulate.

    If you really want to do it in css you can do something like this:

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .arrowDown {
      display: block;
      height: 2em;
      width: 2em;
      position: relative;
    }
    .arrowDown span:first-child,
    .arrowDown span:last-child {
      display: block;
      height: 2em;
      width: 2px;
      background-color: red;
      position: absolute;
      top: 0;
      border-radius: 5.2px;
    }
    .arrowDown span:first-child {
      transform: rotate(40deg);
      left: 5.2px;
    }
    .arrowDown span:last-child {
      transform: rotate(-40deg);
      right: 5px;
    }
    <span class="arrowDown">
        <span></span>
        <span></span>
    </span>

  • answered 2021-09-27 17:25 Shamar Yarde

    I copied and pasted the HTML source code into this website's converter, https://pughtml.com to get the following:

    <section className="centered-container"><a className="link link--arrowed" href="#">Ceci est un magnifique bouton<svg className="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <g fill="none" stroke="#2175FF" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
        <circle className="arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
        <path className="arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
      </g>
    </svg></a></section>
    

    I also copied and pasted the scss into this website's converter, https://jsonformatter.org/scss-to-css to get the following CSS:

    html, body {
        background-color: #f5f5f5;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .centered-container {
        background-color: #fff;
        display: inline-flex;
        padding: 4rem;
        border-radius: 0.125rem;
        border: 1px solid rgba(0, 0, 0, .1);
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .04);
    }
    .link {
        color: #2175ff;
        cursor: pointer;
        font-weight: 400;
        text-decoration: none;
    }
    .link--arrowed {
        display: inline-block;
        height: 2rem;
        line-height: 2rem;
    }
    .link--arrowed .arrow-icon {
        position: relative;
        top: -1px;
        -webkit-transition: -webkit-transform 0.3s ease;
        transition: -webkit-transform 0.3s ease;
        transition: transform 0.3s ease;
        transition: transform 0.3s ease, -webkit-transform 0.3s ease;
        vertical-align: middle;
    }
    .link--arrowed .arrow-icon--circle {
        transition: stroke-dashoffset 0.3s ease;
        stroke-dasharray: 95;
        stroke-dashoffset: 95;
    }
    .link--arrowed:hover .arrow-icon {
        transform: translate3d(5px, 0, 0);
    }
    .link--arrowed:hover .arrow-icon--circle {
        stroke-dashoffset: 0;
    }
    

    It worked for me.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum