Looking for assistance in creating a design similar to the image of a button. Here is the normal state of radio button.
Also, here is the on hover style or checked state.
Looking for assistance in creating a design similar to the image of a button. Here is the normal state of radio button.
Also, here is the on hover style or checked state.
Here is an example of HTML and CSS code:
<div class="radio-button">
<input class="radio-button__input" type="radio" name="" id="btn">
<label class="radio-button__label" for="btn">Text here</label>
</div>
In the CSS code below, we have some styling for the radio button:
.radio-button{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.radio-button__input{
display: none;
}
.radio-button__label{
border: .1em solid gray;
font-size: 48px;
padding: .5em;
border-radius: 2em;
}
.radio-button__input:hover + .radio-button__label, .radio-button__input:checked + .radio-button__label{
background-color: mediumvioletred;
}
The styling on .radio-button is only to center it, so feel free to delete it if not needed. Add a transition property on .radio-button__label for a smooth transition effect.
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: "Roboto", sans-serif;
}
.radio input {
display: none;
}
.radio-box {
padding: 15px 30px 12px;
border-radius: 50px;
color: #868aa8;
border: 2px solid #868aa8;
text-transform: uppercase;
font-size: 34px;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s linear;
display: inline-block;
margin: 0 5px;
}
.radio input:checked + .radio-box,
.radio-box:hover {
color: #fff;
background-color: #ea0b5b;
border-color: #ea0b5b;
}<label class="radio">
<input type="radio" name="time">
<span class="radio-box">5:30 PM</span>
</label>Looking for a way to make three social icons grow on hover and then gradually shrink back when the user stops hovering? Wondering if there's a solution using JavaScript, CSS, or jQuery? ...
I am currently using html5 canvas to develop a function-graph software. There seems to be a critical bug that I cannot figure out. For example, when I use the following code: yOFxGraph(plotFUNCinputYofX,-4,5,-4,4,"rgb(66,44,255)",1); everything operates ...
I'm encountering an issue on my webpage. I have a div with two hidden fields containing values of 0 and 2, respectively. Upon clicking a button that triggers an AJAX query, the div contents are updated with hidden field values of 1 and 2. However, it ...
While working on an MVC program, I encountered an issue when trying to send data from a TextArea to the controller upon a button click. Everything worked fine until I had HTML-based data inside the TextArea. Here's a snippet of the HTML code: <te ...
My Java request is missing some source in the response, causing the Json object to fail. HttpClient client = new DefaultHttpClient(); HttpGet request = new HttpGet( "http://url?"+params); HttpResponse response = client.execute(request); Buffered ...
I am currently working on a project that involves extracting all currency values and their corresponding names from a specific website. These extracted values need to be stored in two separate arrays. While researching online, I came across some code snip ...
I currently have 2 files available: data.php page.php The data.php file is responsible for fetching a row from a SQL database and sending it to the page.php file. Within the page.php file, there is a JavaScript script that receives this row through AJAX ...
Looking for some assistance, thank you. I am struggling with writing the correct condition in Vue for my task. I have two values: content.Image & header.Background Essentially, what I need to do is check if there is a JPEG assigned to content.Image ...
I was trying to implement a tutorial I found on this website for a car-related project, but I encountered an issue. The tutorial was working fine, but I needed to add a 'Go' button to allow users to view the selected car from the drop-down menu. ...
Lately, I've been pondering the most effective way to apply a CSS class conditionally in React JS. While I have come across some suggestions on this topic, they seem scarce or not as detailed as I had hoped for. ...
I'm looking to create a div similar to this design. https://i.sstatic.net/8k9kz.png After trying various methods, I can't seem to get the edge of the Twitter circle to show up in the middle. Can anyone provide guidance on how to achieve this? T ...
I have some JSP code that I need help with. How can I pass checked checkbox values from a.jsp to b.jsp using JavaScript? Any assistance would be greatly appreciated. <html> <head> <meta http-equiv="Content-Type" content="text/ ...
I have a Stripe payment button in my ecommerce website that looks like this: <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_yNuawoy0jUqj1GC14jwcQR5d" data-amount="{{ $total * 100}}" data-name="dixard" data ...
Just a heads up: I'm pretty new to PHP and not super familiar with this code. I stumbled upon it online and tweaked the links and ID, but now I need some help. I'm trying to figure out how to display a specific HTML element, like a paragraph wit ...
Is there a way to stack images on a background image similar to this using HTML? There is also a navbar and logo on the background. I attempted to do something like this: //clearfix .image-stack::after { content: ' '; display: table; clear ...
Looking to create a unique coin-slider that changes the filled factor of a coin as it moves through a specific range of images. For example, when scrolling through 10 images, the filled part of the coin would transition from 0 to 1 depending on which image ...
To make a long story short. The backend team has provided me with a hashMap that looks like this: {12=Other Services (Assisted), 2=Other Services, 4=Collect, 17=Get New (For Me), 19=Get New (For My Business)} As a front-end developer, I am not familiar ...
I recently completed developing a client's website using Squarespace. Now, I am looking to design a header that: 1) Initially has a transparent background upon the user's arrival on the page 2) Transitions to a solid background color and sticks ...
Is there a way to easily convert the data returned by this function into a format that Google Charts API can read? public function ajax_get_dates(){ $data = ([['date1' => '04/08/2016'], ['date2' => '05/08/2016& ...
I am experimenting with opening a modal when an image is clicked using the following code snippet: <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=&quo ...