Guide on creating a hand-drawn pencil circle using only CSS!

Is anyone familiar with how to create a hand-drawn pencil circle hover effect using pure CSS, without relying on SVG like the one featured on CodeMyUi? I've seen examples accomplished with SVG, but I'm specifically interested in achieving it using only pure CSS. If you have any knowledge or tips on this, please share them with me.

Answer №1

Maybe you should consider experimenting with a concept similar to this one?

.circle-on-hover {
  padding: 16px;
  position: relative;
  display: inline-block;
  margin: 16px;
}

.circle-on-hover:hover:after {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid blue;
  content: '';
  top: 0;
  left: 0;
  border-radius: 100px 50px 150px;
  transform: rotate(-5deg);
}
<div class="circle-on-hover">Lorem ipsum</div>

You have the option to adjust the border-radius and rotation for different effects, and possibly include :before to achieve a cross-over in the top right corner?

I trust this guidance will steer you in the correct direction - please keep me informed :-)

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

Looking for assistance in designing SVG tabs?

I'm looking to create tabs that have a design similar to the one shown in this image. Initially, I attempted to achieve this using plain CSS by creating a triangle with the border trick but encountered challenges in adding the gray border. I am now co ...

The functionality of the delete button in Datatables is only operational on the initial page, failing to

My datatable is giving me trouble. The delete button in the action column only works on the first page, but not on the other pages. Here is the code for my delete button: <table id="example" class="table table-striped table-bordered" cellspacing="0" wi ...

Removing an element with a specific class that was created with Javascript can be done by clicking outside the box

I needed to eliminate an element that was created using JavaScript of a specific class when clicked outside the box. I have created a color-picker using .createElement and added a class to it. Now, my goal is to remove that picker whenever a click occu ...

Activating Bootstrap modal when a navigation link is clicked

Just started a site for a client and new to Bootstrap. I've got the layout down - full-width page with "Top Nav" within the nav bar, looking to create a modal effect drop-down. When clicking on "About", it should trigger the .modal function. However, ...

Positives and negatives images for accordion menu

I have successfully created an accordion list using HTML, CSS, and JavaScript. However, I would like to enhance it by adding a plus and minus picture in the left corner of the heading. Is there a way to achieve this functionality? I have two images that I ...

"Exploring the Connection Between PHP, JSON, and

In my current class, we are collaborating on an android app project for our school. Due to the lack of physical meetings, I haven't had direct contact with some of my classmates. One member of the group has been responsible for programming the json an ...

What is the reason behind the improved performance I experience in Chrome with the Developer Console open?

Currently, I am developing a small canvas game completely from scratch using pure JavaScript. This game utilizes a 2D lighting algorithm that is akin to the one found here. It features only one light source and 25 polygons, resulting in approximately 30,0 ...

When the mouse hovers over the text inside a div, the link does not work in Internet Explorer

Here is some code for demonstration. I'm facing an issue where the link spans over the entire div, which works perfectly in Firefox. However, in IE, when I hover over the text, the cursor changes to a text cursor and the link doesn't work there. ...

jQuery 'if' condition not getting detected

My jQuery code is not recognizing an if statement. You can check out the CodePen link here. On my site, I have 4 page transitions - page right, page left, page up, and page down. The contact page is hidden beneath the main hero sections and appears with t ...

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

The table is not displaying the CSS class as intended

I need to modify the behavior of a table so that upon clicking on a value, a specific class is set and the user is redirected to a particular page. The structure of the table is as follows: <?php // Determine the file name based on content type if( ...

Apply a dual-color gradient background vertically

I am trying to figure out how to achieve a two-tone background color in an HTML document. I know this question has been asked before, but I specifically want the colors to be split vertically rather than horizontally. ...

Changing the caret position in a contenteditable div using HTML React

In a recent project I worked on, I included contenteditable divs. Whenever the enter key is pressed within one of these divs, it splits into two separate contenteditable divs. However, after React re-renders the components, the caret tends to go to the beg ...

span element causing border-spacing problem

Is there a way to adjust the spacing between these borders? I've tried using border-spacing but it doesn't seem to be working. https://i.sstatic.net/ZY05g.png {{#each spacing}} <span class='space'> {{business}} ({{Count}}) < ...

Struggling with Bootstrap 4 - need help with navbar and flexbox alignment issues

My goal is to recreate a navigation bar similar to this design: navbar I initially attempted to use the grid system for my navbar, but it didn't work out as expected. After some research, I found that using the grid system for navbars is not recomme ...

A pop-up window for selecting a file within an <a> tag

Is there a way to create an Open File dialog box on a link within my webpage? I attempted <input name="uploadedfile" type="file"> However, it only functions as a button and does not allow for the selection of multiple files. I would like somethin ...

What are the steps to storing numerical inputs as variables using jQuery and then using them to perform calculations in order to update the input numbers

Currently, I am in the process of creating a BMI calculator using HTML and jQuery. <form id="bmiCalculator"> <fieldset> <legend>BMI Calculator:</legend> <p> <label>Height: ...

Issue with Ag-Grid's getRowClass not locating the appropriate CSS styling

I am facing a simple challenge at the moment. My goal is to dynamically change the background color of my rows, with the intention of incorporating this feature when expanding or contracting groups. Currently, I am attempting to utilize gridOptions.getRow ...

The functionality of both P and H1 tags seems to be malfunctioning

Can someone help me with changing the font family and size of my paragraphs and headings (p and h1)? Any assistance would be greatly appreciated. Feel free to review my code for any other errors as it has been a while since I last coded. html, body { ma ...

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation. Th ...