Styling a thin arrow within a circular shape using CSS (ideal for integration with React components)

I came across an intriguing arrow enclosed in a circle, check it out here -

[Link to Arrow in Circle](https://codepen.io/SachaJolly/pen/oWQMoG)

This example was inspired by a website I found -
specifically the section on Arrowed Link – Circle On Hover (cf Google Home Website)

My experience with CSS is limited, so I struggled to replicate the same arrow in my project. Despite attempting various CSS converters, I couldn't achieve the desired result. All I need is a simple way to define these styles (or perhaps there's another method) and implement them in JSX code.

Do you have any suggestions or ideas on how I can accomplish this? Thank you!

javascriptcssreactjssvg

Answer №1

To achieve the best results, it is recommended to utilize SVGs or icon fonts such as material icons or fontawesome. These options are ideal for flexibility and easy customization.

If you prefer using CSS for this task, you can implement a solution like the following:

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>

Answer №2

I utilized an online converter to transform the HTML source code, which I copied and pasted, into a more refined format. The tool I used can be found at . Here is the result of the conversion:

<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 repeated this process with the SCSS code by using another online converter available at . Here is the CSS that was generated:

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;
}

The conversion successfully worked in my favor.

``

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an unhandled runtime error while importing the Client component into the server component: The JSON format is invalid, with the error message stating "undefined"

I've been attempting to create a basic counter component that increments the count of a state variable when a button is clicked. To achieve this, I created a separate file named Counter.tsx and placed it in the components folder at the root of my next ...

javascriptreactjsnext.js

The .value property on the form group displays numeric values as either null or an empty string

I'm encountering an issue with extracting data from a form group. Within my code, there is a formGroup named lineitemForm, and I am attempting to structure this form group as follows: private formatTransferData() { const depositDates = this.get ...

javascriptangular

I'm having trouble accessing my POST data using console.log. Instead of getting the expected data, all I see in the console when I try to GET is "

My code for the POST function is working, but when I try to retrieve and display the POST response from the server, all I get is "null". Can anyone help me figure out how to properly send data from my form to the server and then successfully console log it ...

javascriptformspostget

Script malfunctioning following an AJAX request

My page consists of a header where all my javascript is located. Within the body of the page, there is a link that triggers an ajax http request using vanilla JavaScript (not jQuery). This request retrieves a PHP form and injects it onto my page. The PHP ...

javascriptajaxxmlhttprequest

Problem with UV mapping when adjusting texture size

I am currently working on an application to modify minecraft models. To display the drawn texture mapped on the 3D player model, I am using ThreeJS. However, I'm facing a challenge related to changing the texture size. Initially, the texture is mappe ...

javascript3dthree.js

What steps can I take to address this Material UI alert and deliver a solution that adds value?

I am currently working on fetching API data (specifically category names) from the back-end (Node.js) to the front-end (React). My main objective right now is to populate a Select component from Material UI. To fetch the API data, I am utilizing Express an ...

javascriptreactjsaxiosmaterial-uiwarnings

Pictures will be displayed briefly for 1 second prior to the initiation of the JavaScript animation

I recently built a website using gatsby.js and incorporated bounce.js to animate some images on the page. Bounce.js is a JavaScript library that offers DOM animation functionalities. Although everything appears fine when I view the site locally, once I de ...

javascriptreactjsanimationreact-reduxgatsby

JavaScript is throwing undefined when trying to access object properties

Here are some HTML elements that I frequently work with: <TD id=Cell.0.0> <DIV></DIV> <IMG id=_Q0_C0_mrSingleImg src="radio.gif"> <INPUT type="checkbox" na ...

javascriptjqueryhtml

Transferring scope between pages without the need for an angular service definition

Looking to open a new JSP page while passing the $scope in order to utilize an array response generated in the initial page. Example from test.js file: (function() { 'use strict'; angular .module('test', []) .control ...

javascriptangularjshtml

Is it possible to utilize the returned value of a function within an if statement?

Is there a way to return the result of a function without needing to declare a variable? Can you return the result of a function in a single line? How can you return the result of a function inside an if statement? Is it possible to use a function's ...

javascriptnode.jstypescriptasync-awaitnodes

In ASP.NET MVC, use CSS styling specifically for Partial Views by encapsulating the styles within a `<style scoped>` tag

A new HTML attribute has emerged, known as scoped, however, it is currently only supported by Firefox. This attribute allows you to declare internal styles solely for the parent element. I am curious if it is feasible to replicate this functionality in AS ...

asp.net-mvchtmlcssasp.net-mvc-5

What steps might one take to address the undefined property error in node.js?

Facing an error message that says: Cannot read property 'title' of undefined Everything was functioning properly when using posts.forEach for traversal. However, encountered issues when switching to a for loop. Can anyone provide assistance? H ...

javascriptnode.jsmongodbexpress

Repairing a navbar that is leaning to the left

Currently working on my first front-end project, which is a website for a school club. I've been utilizing the Bootstrap library for CSS, but have encountered an issue with my navbar placement. It seems to be leaning more towards the left side rather ...

htmlcssbootstrap-5

Every time I input information into the form, it keeps coming back as undefined

function displayProduct() { var product = document.getElementById("productForm"); var item = product.elements["item"].value ; document.getElementById("outputResult").innerHTML = item ; } <div> <p id="outputResult"></p> </di ...

javascripthtml

What is the best way to customize arrow designs in a React Slick Slider?

I am struggling to customize the arrows in react-slick with my own PNG images. Despite my efforts, the images appear distorted on the screen as they are automatically set to a width and height of 20px instead of their actual size of 17x27px. I have experim ...

cssreactjsnext.jsslick.jsreact-slick

jquery detecting changes and enabling readonly attribute

I need to trigger an event with the "on change" functionality for a read-only input using jQuery. After that, I want to add some HTML content below it. Essentially, whenever the read-only input is modified, the HTML code should be appended. Please take a ...

javascriptjqueryhtml

The method element.focus() is ineffective on a contentEditable div element that has been rerendered

https://example.com import React, { useEffect, useState } from "react"; import "./styles.css"; const MyCustomComponent = () => { const [text, setText] = useState(""); useEffect(() => { const textarea = documen ...

javascriptreactjsrichtext

Adjust the table header so that it spans two lines and ends with three dots

There is a table with thead and I need to modify the elements inside it so that if the header text is longer than two lines, the remaining part of the text will be shown with three dots. Unfortunately, instead of inserting line breaks, I can only use white ...

htmlcsstwitter-bootstrap-3html-tablebootstrap-4

Discover the magic of Bootstrap Typeahead using Airport IATA codes

I am attempting to implement Bootstrap 3's Typeahead script to populate an airport search feature automatically. Here is the specific web service I am utilizing: To achieve this, I have made modifications to a functional jsfiddle by adjusting the so ...

javascriptjquerybootstrap-typeahead

The function fails to execute on the initial attempt

Currently, I am utilizing Kendo controls, specifically focusing on the Grid and Drop Down Lists. Since the Kendo Grid components do not come with a built-in handler for double click events, I have implemented some JQuery code to work around this limitatio ...

javascriptjquerykendo-asp.net-mvc