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!

CodePudding user response：

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>

CodePudding user response：

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.