The style of a button element is lost when hovering over it after the background color has

This question is related to CSS. If you look at this example, you will see a button with two span elements inside. One using float:left; and the other using float:right;.

The button has a typical button-style, but when clicked on an iPhone or hovered over in a browser, the style disappears due to a change in background-color.

Is there a way to adjust the background-color without losing the overall button style?

EDIT: Attached are images of two buttons: one with the normal button element style and the other where I have changed the background-color resulting in a different appearance during hover.

css button

Answer №1

From my understanding, it seems like the rounded corner disappears when hovering and a border is instead added. Unfortunately, achieving exactly what you want may not be easy since the Button's behavior and appearance are controlled by the system.

One alternative could be to replace the button with a div element, giving you full control over the styling (adjusting it via JavaScript for hover effects).

Answer №2

Everything's running smoothly on my end. Just a quick tip: it's best practice to place floating-right elements before floating-left elements. Not sure if it makes a difference, but worth keeping in mind.

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

Issue with border spacing functionality

I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...

javascript html css

What is the process for capturing a screenshot of a specific DOM element using Intern JS?

I'm currently utilizing intern.js for testing a web application. It allows me to run tests and generate screenshots in case of failures. My goal is to capture a screenshot of a specific element for conducting CSS regression testing with tools like res ...

css selenium screenshot intern regression-testing

Is there a way to apply a custom CSS to Bootstrap without altering its appearance?

Check out this code snippet <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/sub-cat.css"> I am having trouble with my CSS. I tried to modify the "Caption" class in Bootstrap by adding some new styles in "sub- ...

html css twitter-bootstrap

How come the buttons in the navbar are not aligning to the right with justify-content-end?

Having trouble aligning the two buttons in my bootstrap navbar to the right. Despite using justify-content-end, it doesn't seem to work. I thought applying d-flex to the container and then justify-content-end to the items would solve the issue, but e ...

css twitter-bootstrap bootstrap-5

Display the latest item using React

I've encountered a problem with displaying the last message in my pet chat application. Currently, I have to manually scroll to the bottom every time I open the chat in order to see the latest message. This scrolling behavior is not very user-friendly ...

css reactjs next.js frontend

Creating a stylish CSS shadow effect for a collection of elements

In my Ionic2 project, I have an <ion-list> consisting of various items. Currently, these items are plain, but I desire to add some styling such that each item in the list displays a subtle shadow effect, similar to the one shown in the first image of ...

css ionic2

Guide to aligning form data with Bootstrap

Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appre ...

html css forms twitter-bootstrap-3 centering

Verify if any choices are available before displaying the div block

I need to determine if there is a specific option selected in a dropdown menu, and then display a div if the option exists, otherwise hide it. I'm not just checking the currently selected option, but all available options. if (jQuery(".sd select opti ...

javascript jquery html css

Increase the dropdown size without altering the dimensions of the container

I have a dropdown menu enclosed in a div with a vibrant yellow background. Take a look at the code on Plunker here. Upon clicking the dropdown button, the list expands and the container's height increases as well. The background color of the dropdown ...

html css

tips for aligning text to the right of an image

For my college project, I am working on a website. However, I have encountered an issue with using a jsp script to display products in a specific way on the webpage. The problem is that I cannot control where the information about price, name, and descript ...

html css

Tips for preventing the inheritance of .css styles in React

I'm facing an issue with my react application. The App.js fragment is displayed below: import ServiceManual from './components/pages/ServiceManual' import './App.css'; const App = () => { return ( <> ...

javascript html css reactjs

Add a class if the particular class is missing from the webpage

Seeking a solution in JS, I am facing a challenge in creating a series of elements with active states, each opening a caption below when clicked. Utilizing .addClass, .removeClass, and .toggleClass in combination, only one element can be active at a time. ...

javascript jquery html css

Navigate through photos (jQuery) to adjust size and location dynamically (CSS)

Currently, I am in the process of developing a jQuery script that will automatically adjust the size and position of image elements upon page load or resize. To structure my layout, I am utilizing Bootstrap and have set a fixed height using CSS. It is wort ...

jquery html css twitter-bootstrap

ERROR : The value was modified after it had already been checked for changes

Encountering an issue with [height] on the main component and seeking a solution Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '753'. Current value: '731'. I have th ...

html css angular

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

javascript html css

Changing the border color of material ui Rating stars: A guide

I am struggling to change the border color of stars in Material UI Rating because my background color is black, making it difficult to see when the star is empty! Here's the code snippet: import Rating from '@material-ui/lab/Rating'; import ...

css reactjs material-ui react-functional-component

Adjust the Size of Bootstrap Offcanvas using CSS (Bootstrap version 5.2)

Is there a way to change the size of specific bootstrap offcanvas elements without affecting all of them? I am aware that I can modify the SASS variable ($offcanvas-horizontal-width: 400px) to change the size of all offcanvas elements. What I would like i ...

html css bootstrap-5

Website design with a central vertical alignment and a subtle shadow effect

Yesterday I inquired about a website design featuring a shadow, but I have since created a better example and would like to pose the question again. My requirements are as follows: A vertically centered website; A shadow on the content block which may h ...

html css

Modify the background color of one div based on the visibility of another div

My carousel consists of three divs representing a Twitter post, a Facebook post, and a LinkedIn post. These are contained within another div called #social-media-feeds. I am curious if it is feasible to adjust the background color of #social-media-feeds d ...

javascript jquery html css

Tips for applying a class to an element depending on data stored in Local Storage using JQuery

I am currently working on a TODO list project with functions to save and delete records already in place. However, I am facing challenges with the functions for marking items as important and done. One method I use is to retrieve saved items from Local St ...

javascript jquery css html

CSSer Q&A