Animation for radio button hover effect

I'm currently working on creating a stylish hover effect for my radio button with a round border. However, I'm encountering an issue where the border is appearing both inside and outside of the button when hovered over. My goal is to have the border visible only on the outside. Additionally, I am having trouble getting the fade transition to work properly. Any suggestions or advice would be greatly appreciated. Thank you.

input[type='radio'] {
  width: 20px;
  height: 20px;
  border: 2px solid #747474;
  border-radius: 50%;
  outline: none;
  opacity: 0.6;
  transition: 0.3s;
}

input[type='radio']:hover:before {
  box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
  border-radius: 50%;
  opacity: 1;
}

input[type='radio']:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;    
  border-radius: 50%;
}
    
input[type='radio']:checked:before {
  background: green;
}
<input type="radio">

css

Answer №1

Feel free to review this code snippet along with some detailed explanation

input[type='radio'] {
  width: 20px;
  height: 20px;
  border: 2px solid #747474;
  border-radius: 50%;
  outline: none;
  opacity: 0.6;
  /*transition: 0.3s;*/
}

input[type='radio']:hover:before {
  box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
  border-radius: 50%;
  opacity: 1;
}

input[type='radio']:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 10%; /* Adjusted margin to only 10% */
  padding: 10%; /* Increased inner area for border positioning */
  border-radius: 50%;
  transition: 0.3s; /* Transition effect moved here */
}
    
input[type='radio']:checked:before {
  background: green;
}
<input type="radio">

Answer №2

section, enhancements were made to include animation and ensure that the hover border is now only on the outside. This was achieved by modifying the CSS code for input[type='radio']. The changes include setting a specific width and height, adjusting the border style, adding an outline, setting opacity, and implementing transitions for smoother effects. Additionally, when hovering over the radio button, a box-shadow effect with altered border thickness is applied. The use of :before pseudo-element helps in creating the outer border, which further contributes to the overall aesthetic appeal. When the radio button is checked, it now displays a green color background. Overall, these tweaks enhance the visual presentation and interactivity of the radio button element.

Answer №3

Preceding Transition

input[type='radio'] {
  width: 20px;
  height: 20px;
  border: 2px solid #747474;
  border-radius: 50%;
  outline: none;
  opacity: 0.6;
}

input[type='radio']:hover:before {
  box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
  border-radius: 50%;
  opacity: 1;
}

input[type='radio']:before {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  margin: 20% auto;    
  border-radius: 50%;
  transition: 0.3s;
}
    
input[type='radio']:checked:before {
  background: green;
}
<input type="radio">

Answer №4

While some may see it as a somewhat unconventional solution, I believe it could be beneficial.

 input[type='radio'] {
            width: 20px;
            height: 20px;
            border: 2px solid #747474;
            border-radius: 50%;
            outline: none;
            opacity: 0.6;
            transition: 0.3s;
        }
input[type='radio']:hover:before {
            box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
            border-radius: 50%;
            opacity: 1;
        }
input[type='radio']:before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;  
            border-radius: 50%;
        }
input[type='radio']:checked:before {
            background: green;
        }

<input type="radio">

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

Suggestions for automatically adjusting the height and width of a div containing z-indexed content

I'm attempting to automatically adjust the height and width of the parent div that contains three stacked images, but the parent is not adjusting to the dimensions of the content. Even when the div and the last image are on the same z-index, it's ...

htmlcssz-index

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Within a large application, I am managing a micro site and looking to implement tertiary navigation with an active state for pages. This involves inserting a single html blob into multiple pages. My goal is to use an active class to highlight the page in ...

htmlcss

What are the steps to add SVG effects to an image or div element?

Embarking on my first venture into using SVG graphics has left me feeling a bit bewildered. Despite extensive research, I have yet to stumble upon the answer to my current quandary. The objective at hand is to transform an image, assuming that the source ...

htmlcsssvgsvg-filters

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

javascripthtmlcss

Scroll through the div to quickly find the relevant content

I have implemented the following HTML structure: <div style="height:200px;overflow-y:scroll;"> <table>.....</table> </div> By using this setup, I am aiming to replicate the functionality of an expanded <select> control wit ...

javascriptjqueryhtmlcssscrollable

When the page loads, the ASP menu should display the sub-menu items in a unique style

<asp:SiteMapDataSource runat="server" ID="RelativeSiteMapDataSource" StartFromCurrentNode="False" ShowStartingNode="False" SiteMapProvider="CatalogSiteMap" /> <asp:Menu runat="server" ID="Navigator" MaximumDynamicDisplayLevels="0" StaticDispl ...

asp.netcssmenusubmenuaspmenu

Complete a checkbox entry form and showcase it within a "division" on the current page

Hello everyone, I need some help. I have a form that I want to send to a specific div on the same page. This is what I am aiming for. I have a floating div named "basket" in the top right corner of my page where I want the form data to be displayed after s ...

javascripthtmlcssajax

Leveraging bootstrap's grid system to prioritize content layout based on the

Currently working on a compact React Js project with Bootstrap for styling. One obstacle I've encountered is the need to display the last element as the first one on the page. To achieve this, I plan to utilize the order-1 and order-12 classes from Bo ...

javascriptcssreactjsbootstrap-4

Looking to resolve the line formatting issue in my Bootstrap navigation bar

I'm having an issue with my responsive navigation in Bootstrap. When I resize the window, the navigation transforms to allow content expansion. However, I've noticed that when I expand the content, the lines, background color, and logo start to l ...

csstwitter-bootstrap

Struggling with aligning Bootstrap 5 navbar items to the right while keeping the brand on the left side?

I'm struggling to align the items to the right on my navbar. No matter what I try, they just won't budge from the left side next to my brand logo. Here's the code I'm working with: <nav class="navbar navbar-expand-lg navbar-dar ...

htmlcssnavbarbootstrap-5

Styling with CSS: Utilize flexbox to adjust the layout of two elements, ensuring they

Trying to float an image to the right side of a paragraph is proving to be more challenging than anticipated. 100px +-------------------------+ +------------+ | | | | | ...

htmlcsscss-float

Display of certain special characters such as ">" may be affected when using UTF-8 encoding

Here are the codes I'm working with: ul.pathnav a:before{ content:"\0X3E"; text-decoration:none; } I have been trying to use the hex code \0x3e for ">", but it doesn't seem to be working. However, when I tried usi ...

htmlcssencodingutf-8

Web view that remains fixed regardless of resolution, compatible with both iPhone and iPhone4 devices

Looking to create a webview with one HTML and one CSS file that displays graphics at the same size, but in their native resolution. Currently, my webviews built for 320x480 appear sharp when scaled up (text and border-radius), but images are displayed at ...

iphonecssuiwebview

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Here is the code snippet that I am having trouble with: http://jsfiddle.net/sk1hg4h3/1/. It works fine in jsfiddle, but not in a normal browser. I have included the necessary elements in the head to call all the external files. <head> <scri ...

javascriptjqueryhtmlcssjsfiddle

What is the best way to make the first <p> tags bold within an array?

I tried using ::first-line, but it bolds all the p tags in the array. What I want is to only bold the first p tag which contains "Hello". https://i.sstatic.net/l0Ss6.png <div v-for="item in first" :key="item.id"> <p cl ...

cssvue.js

Having trouble with loading background images in Angular 4?

After researching extensively on stack overflow, I am still struggling to resolve this issue. The main problem I am facing is related to adding a background image to the header tag in my code. Unfortunately, no matter what I try, the background image refu ...

htmlcssangulartypescriptbackground-image

From plain to vibrant: Using CSS gradients for background design

I have customized a button by adding a gradient to it. Below is the code snippet: .mybutton { background: #258dc8; /* Old browsers */ background: -moz-linear-gradient(top, #258dc8 0%, #258dc8 100%); /* FF3.6+ */ background: -webkit-gradient( ...

css

The dropdown feature of the Angular-UI typeahead directive is not functioning

Recently, while using the AngularUI typeahead directive, I encountered an issue where the dropdown appeared cut vertically with a scrollbar on the right. Despite this visual glitch, all the data was displaying correctly within the typeahead box. The image ...

cssangularjsangular-ui

Scrollbar missing in browser

I'm currently working on an HTML page, and I've encountered an issue where the browser scrollbar doesn't appear when the content exceeds the browser window. My CSS skills are at a beginner level, so I'm not entirely sure how to add attr ...

javascripthtmlcss

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

Apologies for any language barrier. I am encountering an issue with a PHP page that includes a table meant to be displayed as position:fixed; however, it consistently appears above the scrollbars and does not stay within the parent div. View screenshot he ...

htmlcss