Ways to create an oval background for my button

Can someone help me create a button with a unique shape similar to the Products button on stack overflow? Check out this image for reference

I attempted using border radius, but it didn't give me the desired effect. I searched for other options but couldn't find any solutions that worked.

nav > ul > li:hover {
  background-color: #dfdfe2;
  color: #1b1b32;
  cursor: pointer;
  border-radius: 40%;
}
li > a {
  color: inherit;
  text-decoration: none;
}
nav > ul {
  display: inline-block;
  vertical-align: middle;
  padding: 0.2%;
  margin: 0.7%;

Here's what my current code gives me

Answer №1

To achieve the desired effect, make sure to include both padding and border-radius properties as demonstrated in the code snippet below. Also, remove the border radius that was applied on :hover.

nav > ul > li {
      padding: 10px 15px;
      border-radius: 50px;
    }

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

Tips for stopping the loading of background images on an image slider

I am utilizing unslider to showcase an image slider on the landing page of my website. The slides are designed with background images in the CSS, and they adjust based on the media query. My concern is that I don't want all the slider images to load a ...

Centered iframe within a div

I am trying to center my iframe within a white box and need some assistance with this. I want the iframe to be in the middle of the white box rather than its current position at the moment. game1.html: <html> <head> <title>R ...

Interested in mastering BootStrap for Angularjs?

As a PHP developer with a newfound interest in JavaScript, I took it upon myself to learn AngularJS and jQuery. However, I recently discovered that simply mastering Angular is not enough - Bootstrap is also necessary. My only issue is my fear of CSS; handl ...

iOS Safari browser does not support changing the caret color in textarea

Seeking a solution to hide the text cursor (caret) from a textarea on iOS browsers like Safari and Chrome. Despite trying the caret-color property, it does not seem to work. Are there any alternative methods to achieve this? One approach I attempted is b ...

Choose a specific location on a vehicle illustration within a pop-up window. The image should be partitioned into 6 separate sections

I have a project for my client where they need to choose a car and then indicate where the damage is located on an image, which is divided into 6 sections. I'm struggling to figure out how to achieve this. I initially thought z-index would work, but ...

Using the "align" attribute is considered outdated and not recommended in HTML5 documents

I have encountered an error when using the align attribute. How can I fix this issue with the correct HTML5 compatible syntax? <table style="margin: 0 auto;"> <tbody> <tr> <td><input typ ...

Tips for passing a page as an argument in the function parameter of the page.evaluate() method?

I keep running into this issue when I pass the page as an argument: TypeError: Converting circular structure to JSON --> commencing at object with constructor 'BrowserContext' | property '_browser' -> object with const ...

Angular: Display an element above and in relation to a button

Before I dive in, let me just mention that I have searched extensively for a solution to my problem without much luck. The issue is describing exactly what I'm trying to accomplish in a way that yields relevant search results. If you're interest ...

Generate selection choices by looping through a JSON document

I am attempting to develop a search box that will provide autocomplete suggestions based on user input from a key-value pair in a json file. I initially thought using datalist would be the most suitable approach for this task, however, upon running the cod ...

Dynamic flexibility for content scrolling across components

Creating a mobile-friendly terms of service page with a title, content, and two buttons is my current project. The specific requirements are: All components should not exceed 100% of the viewport to allow for scrolling The buttons need to stay sticky at t ...

jQuery Modal activated only once upon clicking

Recently, I've been experiencing a frustrating issue that's giving me a splitting headache. Despite scouring this forum for answers, my problem persists. Here's the situation: I have a button that triggers modals. Upon first click after refr ...

Converting counterup2 to pure vanilla JavaScript: step-by-step guide

Is there a way to convert the counterUp2 jQuery code to vanilla JavaScript? const counters = document.querySelectorAll('.counter'); function count(element) { let currentValue = 0; const targetValue = parseInt(element.innerText); let interv ...

Ways to manipulate external CSS classes with styled components without direct access

Currently, I am utilizing react-table and wanting to implement CSS rules for the class rt-td, which is not accessible or adjustable through their API functionalities. In traditional CSS practice, I could easily override the CSS class within my stylesheet. ...

Transforming Google Maps from using jQuery to AngularJS

If I have a Jquery google map with find address and routing system, my goal is to convert it to an angular google map with more options. The current Jquery google map code looks like this: var directionsDisplay = new google.maps.DirectionsRenderer({ d ...

Is there a way to eliminate the default arrow on a list input and replace it with a custom arrow solely with html and css?

Is there anyone who can help me figure out how to remove the default arrow in the list input field and replace it with a new arrow icon? <body> <form > <label for="data-list">Choose a browser from this list &l ...

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

I am currently working on a form that contains select fields with various options pre-populated. <form [formGroup]="selectVehicleForm"> <select formControlName="Manufacturer"> <option *ngFor='let ...

Loading all the content and scripts from one page into another

Are you looking for a seamless way to view and book our scuba diving programmes without having to navigate away from the main page? If so, we understand your desire for convenience. Instead of redirecting you to separate pages when you click on buttons li ...

Utilizing htmx for interactive elements throughout the website

When I make an htmx-request on my page, a loading spinner is displayed like this: <div class="col-4 px-4dot5 py-3 bg-secondary-light"> <label for="stellenangebotLink" class="form-label fs-5">Link</label> ...

jQuery inserts a closing tag before reopening it when applying .before()

I have the following HTML code: <ul> <div> <li>a</li> <li>b</li> <li class="break">c</li> <li>d</li> <li>f</li> ...

Anchor link leading to an incorrect location

Sorry for the potentially silly question, but I'm struggling to figure out what's happening here. I'm currently working on a website and trying to create an anchor link at . I've placed the anchor just before in this code: <a name ...