CSS3 transition not functioning as expected

I am attempting to use CSS3 transition effects to change the background and text color when hovering over a button. However, only the text color is changing and not the background color. You can view my code on jsfiddle here. Here is the CSS I am using:

.input-submit
{
    margin: 12px 0 2px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(224, 224, 224)));
    // more css properties...
}

.input-submit:hover
{
    cursor:pointer;
    margin: 12px 0 2px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(145, 191, 1)), to(rgb(111, 149, 1)));
    // more css properties...
}

Answer №1

Wow, your CSS code is really extensive! From what I know, current browsers do not support transitioning css gradients. Due to the complexity of your backgrounds, the transitions cannot be applied.

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

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

What is the best way to reposition a container within another container using bootstrap?

I am new to working with Bootstrap and I am attempting to shift a container to the left within another container, but so far have been unsuccessful. In this image, you can see my attempt at moving the div containing a checkbox to the left I attempted to ...

Designing a dynamic button that expands on hover to catch the eye

My instructor has provided us with this code snippet: <a class="btn btn-tertiary" href="#"> <span class="circle"> <i class="arrow-right"> </i> </span>Create profile </a> .btn.bt ...

Dynamic CSS containers that adjust according to browser and screen dimensions

01) In my attempt to create a row with two content boxes, I encountered an issue. The first box is supposed to display an image and the second box text. However, I am struggling to make it responsive and interactive based on different browser and screen si ...

Unexpected outcomes when generating jQuery pages using CSS

I have created a piece of JavaScript code that populates 3 divs with icons in even rows. However, I am facing an issue where my first two rows align as expected, but the third row starts aligned with .col-5. Can you help me troubleshoot this? function row ...

Incorporating rounded corners to an embedded YouTube video

Check out this JSFiddle link. The border-radius property appears to be working correctly at first, but then the rounded corners suddenly disappear shortly after loading. Is there a way to apply rounded corners to YouTube videos that are embedded on a webp ...

A form field leaves the container element, positioned to the far right using the `float: right;` CSS property

This is the content within the <body> tag. <div id="border"> <p><h1 style="text-align: center;">Welcome to XYZ Airline!</h1></p> <table caption="Select your preferred seat" style="margin-botto ...

Developing an interactive web interface with HTML

I've been attempting to design a flexible HTML page that replicates the layout of a Java applet clock, but I'm unsure if my current approach is correct. Below is an example of the three-clock image set that I am currently working on. My method i ...

What is the reason behind Facebook's use of margin-left: -9999px to conceal elements?

While experimenting with firebug on Facebook's stream, I stumbled upon an interesting discovery regarding the style of the "update options" menu. It appears that they are hiding this menu by using margin-left: -9999px, and displaying it by overriding ...

What is the best way to make a div expand to the full width of the screen while still being contained within its parent div?

I am facing an issue with the black bar at the bottom of the slider not stretching full-width on the screen. While it works fine on the left, the right side is cut off at the container edge. I am using Master Slider if that's relevant information. Can ...

Steps to reveal a hidden div when clicking on another div using CSS exclusively

Is it possible to reveal a hidden div when another div is clicked using only CSS? Below is the HTML code: <div id="contentmenu"> <div class="show"> <a class="show"> My Student ...

The integration of a Bootstrap modal within the side bar's rendering

Struggling with a modal appearing inside my side div and can't find any solutions in the bootstrap5 documentation or online forums. https://i.stack.imgur.com/gHsBi.png I just want the modal to display centered on the page with the background fade ef ...

The placement of the div only shifts in Firefox

Looking to place a small 25px - 25px image at the end of a line of text? Using a DIV (re1DOC) to position the element can make it easier. However, the issue arises when the element displays correctly in IE & Chrome, but not in Firefox. The text shifts slig ...

javascript - determine whether a hyperlink has been accessed

Is there a method to determine if a link has been visited? In Firefox, the color of a link changes after clicking on it, which leads me to believe it is possible. Edit: This question pertains to a Firefox extension, so I am unable to modify the HTML or CS ...

Tips for avoiding an automatic slide up in a CSS menu

Is there a way to disable the automatic slide-up effect on my CSS menu when clicking a list item? I have tried using stop().slideup() function in my JavaScript code, but it doesn't seem to work. Additionally, I would like to highlight the selected lis ...

Add a div element only if there is a background image present

I am facing a situation where I need to display an image as the background of a div only if it is available. If the image is not present, I do not want the div to be visible at all. I am working with django templates and here is my current approach: {% if ...

My goal is to create a stylish form using bootstrap and CSS3

I am aiming to replicate the layout of this particular page: https://i.sstatic.net/HxOhC.png Struggling to utilize css3 for designing, how can I achieve a form similar to this? Facing difficulty in creating the outer red border and inserting spacing betw ...

Buttons and links with intricate geometries

I am currently developing a web application using Java/JSF and I am interested in finding out about technologies that would allow me to define intricate shapes as clickable buttons or links. Right now, my only option is to split an image into smaller trans ...

Arrange two divs on either side of the center div when on a smaller screen

Looking for a straightforward approach to achieve this. Imagine it as follows: [A][__B_][A] to [A][A] [__B_] I hope that explanation is clear, but I'm happy to provide more details if necessary. Thank you in advance! ...

Implementing Bootstrap 3 mobile design by necessity

My Wordpress site uses a Bootstrap 3 layout where the loop displays posts using 2 different templates. Type 1 <div class="row"> <div class="col-md-4"> <h1>title</h1> <h3>sub</h3> </div> ...