Is it possible to replicate the Button Panel shown in the link above using HTML and CSS? The white shapes are actually buttons.
Is it possible to replicate the Button Panel shown in the link above using HTML and CSS? The white shapes are actually buttons.
If you want to arrange your links in a specific way, try positioning them carefully. However, this method is most effective when you have a set number of links. On the other hand, using JavaScript would be more beneficial if you're dealing with a dynamic or unknown number of links.
div{
display:inline-block;
height:300px;
width:300px;
background:rgba(0,0,0,0.2);
border-radius:50%;
position:relative;
overflow:hidden;
border:10px solid black;
}
div:before{
content:"";
position:absolute;
height:70%;
width:70%;
border-radius:50%;
background:black;
top:15%;
left:15%;
z-index:8;
}
div a {
position:absolute;
padding:20px;
background:tomato;
padding-bottom:50px;
}
div a:nth-child(1){
bottom:-10%;
left:50%;
transform:translateX(-50%);
}
div a:nth-child(2){
bottom:10%;
left:10%;
transform:translateX(-50%) rotate(55deg);
}
div a:nth-child(3){
bottom:10%;
left:90%;
transform:translateX(-50%) rotate(-55deg);
}
div a:hover{
background:cornflowerblue;<div>
<a href="#">Lnk</a>
<a href="#">Lnk</a>
<a href="#">Lnk</a>
</div>Note
Another option to consider is using perspective, although JavaScript may still be the preferable choice for this scenario.
If you're looking for some visually appealing styled buttons using just the border-radius property, I highly recommend checking out this site: Sweet CSS3 Buttons
But if you're set on creating buttons or divs (instead of utilizing canvas or SVG), you'll also need to incorporate CSS properties like transform with rotate, translateY, and translateX. Here's a basic example:
// Clockwise
.button2 {
transform: rotate(45deg) translateY(100px) translateX(-100px);
}
.button3 {
transform: rotate(90deg) translateY(100px) translateX(-100px);
}
.button4 {
transform: rotate(135deg) translateY(-100px) translateX(100px);
}
.button5 {
transform: rotate(45deg) translateY(100px) translateX(-100px);
}
I hope this information is helpful in achieving your desired outcome. Best regards.
In my .NET MVC application, I am utilizing Bootstrap 5.1 to create navigation tabs with 'a' tags generated via ActionLink. <ul class="nav nav-tabs"> <li class="nav-item"> @Html.ActionLink("Enti ...
My webpage is styled with Bootstrap v2 and looks great in Firefox. However, I'm struggling to apply the same CSS color style in IE8: .navbar-inverse .navbar-inner { background-color: #1b1b1b; background-image: -moz-linear-gradient(top, #fab ...
I've recently created a car rental calculator for a client, and it's almost complete. Everything is working smoothly, from the calculations to the conditions. However, I'm facing an issue where the price isn't calculated on page load. I ...
Currently, I am developing a login page in html utilizing the materialize css framework. In my design, I created a card where Login and Register are displayed as tabs within the card. However, one of the forms includes a datepicker from materialize which ...
Utilizing Material UI for a Select menu along with Emotion for custom styling. I am facing a challenge where I need to customize the root classes (MuiPaper-root or MuiMenu-paper) of the menu popover once a menu item inside the Select menu is clicked. Inc ...
Having multiple forms in an expansion presents a unique challenge. I initially used the following code for a date picker: <mat-form-field> <input formControlName="date" matInput placeholder="Date" type="date"> </mat-form-field> This m ...
Hello everyone, this is my very first post on Stack Overflow and I'm a bit unsure about the rules regarding posting. Please feel free to point out any mistakes I may have made. I've searched through the forums but haven't found a clear answe ...
I have a Google Maps marker displayed below, applying a Font Awesome icon as the label/icon. However, I am unsure how to a.) change the color of the marker and b.) include a number inside the marker. Referencing this Stack Overflow post This is the code ...
Recently, I've been on a mission to create a Google Workspace Add On that can display an iFrame. My journey led me to explore the documentation for Google Apps Script and Google Add Ons. From what I've gathered so far, it seems that I'll ne ...
After creating menus with expandable items that change style upon clicking, I encountered an issue where the styling changes were not being applied correctly. To address this problem, I followed Sushanth's suggestion and replaced $this with $(this), ...
Attempting to scrape all the HTML elements from a page using requests & beautifulsoup. Utilizing ASIN (Amazon Standard Identification Number) to extract product details from a page. The code snippet is as shown below: from urllib.request import urlope ...
I am working on a webpage with a jQuery menu located at the following link: Menu To accommodate more items and have greater control, I duplicated the menu twice. However, when hovering over them, the duplication is visible in the background. Is there a ...
I have a buttonset that triggers a change event. When this event occurs, an ajax post is made to save the new value. If there is an error during the process, I want the buttonset to revert back to its original state. To achieve this, I store the initial s ...
I have a complex website with multiple containers. My objective is to apply a color to a container with the class "colorme" when another container, located far away from it, has the class "active". Here is how the code is structured: .tooltip:has(tool ...
I have been working on a note-taking website as an experiment. Everything was running smoothly in the live preview from brackets until I saved the files, and now none of the jQuery functions are working. I suspect it's an issue with my code, but it co ...
I'm inquiring about an issue with Safari Mobile and the CSS object-position/object-fit property. I attempted to use it, but unfortunately, it's not working for me. I've come across conflicting answers regarding Safari Mobile's support ...
After calling the service method from the controller, there is a delay in receiving the data that I need to populate a dropdown. My expectation is that when I call this method from the controller, it should return a response immediately, and then other log ...
I'm seeking advice on how to design a website with a fixed header and footer that remain consistent across all pages, with only the content area altering. I've come across a site as an example - , but couldn't figure out how it was done even ...
On any screen size, the red box height should increase with data and body while maintaining a 20px margin for the div. The data is displayed inside the red box on a 1920*1080 screen, but overflows on a 1360*768 screen. background-color: red; border: 10px s ...
Is there a way to apply bootstrap-5 styles only to a specific block or page? Can someone provide guidance on isolating bootstrap 5 either for the entire page or in a specific area? ...