https://i.sstatic.net/bBwqi.png
I came up with this idea for a button group.
<div class="btngroup">
<button type="button" class="btn">Organization</button>
<button type="button" class="btn">Project</button>
<button type="button" class="btn">Applications</button>
</div>Could you kindly review the code link provided below? It is designed using the flex-box property for structuring.
Here is the link for reference: https://jsfiddle.net/yudizsolutions/oa8pyjuq/
.btngroup {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #eeeeee;
border-right-color: transparent;
border-radius: 10px;
max-width: 80%;
margin: 0 auto;
}
.btngroup .btn {
position: relative;
border: 0;
background: transparent;
color: #b2b2b2;
padding: 20px 40px 20px 50px;
font-size: 14px;
font-weight: 300;
flex: 1;
cursor: pointer;
transition: all ease-in-out 0.5s;
}
.btngroup .btn::after,
.btngroup .btn::before {
position: absolute;
content: '';
}
.btngroup .btn.active::after,
.btngroup .btn:hover::after {
background-color: #fbfbfb;
height: 100%;
width: 100%;
top: 0;
left: -4px;
z-index: -1;
}
.btngroup .btn::before {
top: 50%;
right: -15px;
height: 44px;
width: 44px;
border: 1px solid #eeeeee;
background: linear-gradient(0deg, rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 10%);
border-bottom-color: transparent;
border-left-color: transparent;
transform: translateY(-50%) rotate(45deg);
border-radius: 10px;
}
.btngroup .btn.active::before,
.btngroup .btn:hover::before {
background: #fbfbfb;
}<div class="btngroup">
<button type="button" class="btn">Organization</button>
<button type="button" class="btn">Project</button>
<button type="button" class="btn">Applications</button>
</div>While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...
Looking to make the first letter of certain words bold on a button in my UI that says, "Active Engagement" and "Active Non-Engagement". How can this be achieved? For example: Active Engagement, Active Non-Engagement The code for the buttons is as follows ...
I'm having trouble validating the values of the input elements in my form. I can't seem to figure out what I'm doing wrong. Can anyone help me out? Thank you. <div class="form--group"> <input class="thename" name="name[]" type= ...
Recently, I developed a browser extension that adds an overlay button to the LinkedIn website. Everything was running smoothly until I discovered that LinkedIn uses a global font-size: 62,5% that completely messes up my design.. https://i.stack.imgur.com ...
I am having an issue with setting up my own express server for a React app in production. I keep getting a 404 error for the index.js file which contains my React js script. Here is the folder structure I am working with: server.js +public | index.html | ...
Currently, I am in the process of creating a Node.js Web Server. Initially, I decided to use pug as my view engine for this project. However, the Web Designer provided me with HTML files that have a very different syntax from pug. As a result, I am cons ...
Attempting to create a layout of items using an Accordion arrangement (from Bootstrap) has led me to retrieve data from a pgsql db. Fortunately, the data retrieval process is successful. The challenge lies in displaying this data, as I am encountering an ...
My web page includes a video, and I have successfully used JavaScript injection to control the play/pause functionality. Now, I am looking to also adjust the volume based on percentage. How can I create a function that decreases or increases the volume acc ...
Is there a way to hide elements using classes like "d-none" when the data is null in React? <span className="product__tag">{prod.tag1}</span> <span className="product__tag">{prod.tag2}</span> <span classN ...
I have observed that numerous blogs utilize URLs in the following format: It seems like this is done for the purpose of search engine optimization. How exactly is this processed from the underlying data model? Do you actually search for VirtualCamarade ...
I attempted to insert an image using the 'img html tag' on my page (index.html). The image is located in the folder (imgs) within my project directory (Book_Store). Despite my efforts, I encountered this error message: Failed to load resource: ...
When viewing the html code below, it appears as two columns in Opera and IE10, but only one column in Chrome, Safari, and Firefox. Can anyone explain why this is happening? The styling code [ body{column-count: 2} ] seems to only be effective in Opera and ...
As a newcomer to webpack, I am looking to compress and reference linked CSS files in HTML. Below is the code snippet I am working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <meta name="viewport" ...
I recently developed a new AR project that allows users to interact with AR content through their phone camera on a website. However, I am facing an issue where I cannot easily test my website on an iPhone whenever I make changes to the code. Currently, ...
I'm facing a challenging situation here. I have a container with a background image, and inside it, there are 3 small circles. My goal is to make the background image zoom in when I hover over it, and dim the background image when I hover over any of ...
I am working on a gallery that features multiple images and I want the images to zoom in when hovered over without resizing the container. My project is built using Bootstrap 4. <div class="row"> <div class="col-12"><img ...
I'm pondering whether it's feasible, but here's my concept: Within my page, there are multiple identical blocks with the same classes, differing only in content. I am unable or unwilling to assign IDs because these blocks are dynamically g ...
I am having trouble displaying a slideshow by default on my website. I am aiming for something like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow (but with only 2 photos instead of 3) However, what I currently have is: image ...
As a complete novice in the world of web scraping, I am diving into the process headfirst. Currently focusing on this particular website, my goal is to extract links leading to discussions about specific episodes. Using SelectorGadget, I successfully isol ...
I am trying to design a uniquely shaped button that sits on top of an image, but I am encountering some challenges with the scaling of the button mask. Both the image and masks were created at the same base dimensions for easy alignment at 0,0. Here is a ...