What could be causing the hover styling to not be effective on my div element?

I stumbled upon this interesting website that showcases a variety of captivating button designs with hover effects. Excited to try them out, I copied some examples but encountered difficulties making them work on my own site:

div {
  width: 90%;
  height: 200px;
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -moz-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -webkit-gradient(linear, left top, left right, color-stop(0%,#fffc00),color-stop(51%,#ffffff ), color-stop(100%,#fffc00 ));
  background-image: -webkit-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -o-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -ms-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  border-radius: 15px;
  position: relative;
  margin: 0 auto;
  margin-top: 15px;
  -moz-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
}

div:hover {
  background-position: right center;
}
<div></div>

The animations did not display as intended compared to what was showcased on the mentioned website.

htmlcss

Answer №1

Based on their suggestion, you need to add transition: 0.5s; for a smooth transition effect and background-size: 200% auto; to ensure the button's background is wide enough for content display when scrolling.

Here is an example button using their recommendations:

.btn-grad {
  padding:15px;
  background-image: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876 100%);
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    box-shadow: 0 0 20px #eee;
    display: block;
}
.btn-grad:hover { 
  background-position: right center; 
}
<button class="btn-grad">Submit</button>

And here is your initial code snippet:

div {
  width: 90%;
  height: 200px;
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -moz-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -webkit-gradient(linear, left top, left right, color-stop(0%,#fffc00),color-stop(51%,#ffffff ), color-stop(100%,#fffc00 ));
  background-image: -webkit-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -o-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -ms-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  border-radius: 15px;
  position: relative;
  margin: 0 auto;
  margin-top: 15px;
  -moz-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0 0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0 0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0 0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
    transition: 0.5s;
    background-size: 200% auto;
}

div:hover {
  background-position: right center;
}
<div></div>

Answer №2

There seems to be an issue with the transition duration of 0.5 seconds and background-size set to 200% auto in the CSS properties.

Answer №3

Kindly review this code snippet to ensure it is compatible with various browsers.

div {
  transition: 0.5s;
  background-size: 200% auto;
  width: 90%;
  height: 200px;
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -moz-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -webkit-gradient(linear, left top, left right, color-stop(0%,#fffc00),color-stop(51%,#ffffff ), color-stop(100%,#fffc00 ));
  background-image: -webkit-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -o-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: -ms-linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  background-image: linear-gradient(to right, #fffc00 0%, #ffffff 51%, #fffc00 100%);
  border-radius: 15px;
  position: relative;
  margin: 0 auto;
  margin-top: 15px;
  -moz-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
  box-shadow:
    inset 0 -3em 3em rgba(0,0,0,0.1),
    0 0  0 2px rgb(255,255,255),
    0.3em 0.3em 1em rgba(0,0,0,0.3);
}

div:hover {
  background-position: right center;
}
<div></div>

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

Responsive Ionic columns for listing items

Can you please try resizing this code snippet: http://codepen.io/anon/pen/zxGbbx <ion-content> <ul class="list"> <a class="item" ng-repeat="thread in data" ng-href="{{thread.url}}" target="_blank"> <li class=""> ...

cssangularjstwitter-bootstrapionic-framework

CSS Animation: Smoothly transition out of a class

When this code is executed, the modal is displayed with a smooth transition using CSS3. Upon clicking on "Close Modal," the class ".is-active" is removed instantly. Instead, I would like to achieve the reverse effect where the class is removed gradually. ...

jquerycssanimation

What is the best way to ensure that the child flex box matches the height of the parent flex box by 100%?

As a beginner, I'm venturing into creating an experimental site for myself. However, I am facing an issue where the .menu-container does not seem to stretch 100% the height of the .container. You can view the code on jsfiddle: https://jsfiddle.net/y1 ...

htmlcss

Guide to passing arguments to a function within Vue's v-for loop?

Is there a way to pass the parameter {{ item.id }} to my function productos.mostrarModal() within a v-for loop in vue.js? <div v-for="item of articulos"> <a href="#" onclick="productos.mostrarModal()" > <h2>{{item.name}}< ...

javascripthtmlvue.jsvuejs2vue-component

What is the best way to create a view that caters to both administrators and regular users?

Currently, I am developing a system in Django which displays different fields and options based on whether the user is an administrator or a Jefe from the table. The administrator can access the panel in Django. class UsuarioCrear(SuccessMessageMixin, Crea ...

htmlpython-3.xdjangopostgresql

Error message: WebTorrent encountered an issue and was unable to pipe to multiple destinations at once

Upon attempting to stream video from a provided torrent file, I encountered some unexpected issues. The example was taken from the official site, so one would naturally assume it should work seamlessly. To troubleshoot, I tried setting up a default site u ...

javascripthtmlnpmwebtorrent

Is it possible to target elements based on a specific CSS3 property they use?

Is there a method to target all elements in the DOM with a border-radius other than 0? If anyone has suggestions, it would be greatly appreciated! ...

javascriptjquerycss

The option to clear searches is missing from the iOS interface

My application is designed to perform searches using post codes, and for the most part, it functions properly. However, I have encountered an issue where the clear icon on the right-hand side of the field does not display in certain browsers. To investiga ...

javascriptiosobjective-chtmlhtml-input

Transferring Textarea data from HTML to Python

I have a vision to develop a mailing system utilizing Django. The main concept involves having a URL page, email.html, where Django will deploy the URL upon entering the correct one. The structure of this page consists of a simple textarea and a submit bu ...

pythonhtmldjango

Managing images in JavaScript while conserving memory

Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...

javascriptjqueryhtmlcssoptimization

What is the best way to align a Font Awesome icon within an SVG circle?

Can anyone help me position the trophy inside the circle, just below the number 2000? <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e352835 ...

htmlcssbootstrap-5font-awesome

NarrativeTome Hook for React

After incorporating the useLocation hook into my code, I encountered a hurdle in initializing it within Storybook: let location = useLocation(); const parsedLocation = new URLSearchParams(location.search) const query = parsedLocation.get('query' ...

cssreactjsreact-nativestorybook

Enlarging the modal overlay

My Angular/Bootstrap app features a small text area within a modal window that often contains lengthy content exceeding the size of the textarea and modal itself. I am looking to incorporate a button within the modal window that, when clicked, opens a lar ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

The form data is being passed as null to HttpContext.Current.Request

My file upload module is working well with Postman without any content type. However, in the code, the file count always shows as 0 in the backend API. If anyone has any insights into what I might be doing wrong, please help me out. Thank you. Below is my ...

javascripthtmlangularjsasp.net-web-api

I attempted to connect my JavaScript file to my HTML file, but unfortunately, no changes are taking place

I have created an HTML file where I am trying to pass input from it into a function located in a separate JavaScript file, and then have the data added to a SQL server. The JavaScript file works perfectly fine when run independently, but when I try to call ...

javascripthtml

Exploring search capabilities within D3 graph nodes

After creating a JSON file with four tiers and utilizing D3.js's collapsing box format to visualize it (source: https://bl.ocks.org/swayvil/b86f8d4941bdfcbfff8f69619cd2f460), I've run into an issue. The problem stems from the sheer size of the J ...

javascripthtmljsond3.js

Cannot get Favicon.ico to update after downloading

Recently, I started playing around with html and CSS. I decided to customize my website by using an icon as my favicon. I successfully converted a .png file to a .ico using a generator, downloaded it, and implemented it on my site. However, now I'm fa ...

htmlcss

Is Swiper carousel navigation secretly operating without being seen?

I've got a website that utilizes the Swiper carousel from SwiperJS, find it here: An issue I am facing is that the navigation elements are invisible but functional, with the pagination feature unaffected. This peculiar behavior is observed only in Sa ...

javascripthtmlcssswiper.js

Tips for increasing the number of inputs within a form using <script> elements

I am currently working on a form within the script tags and I would like to include additional input fields before submitting. However, the submit button seems to be malfunctioning and I suspect that there may be an issue with how I am accessing it in my c ...

javascriptjqueryhtmlforms

Media Queries seem to be unresponsive on Tablet and Desktop devices

I've been trying to resolve this issue for quite some time now, but I'm still unable to find a solution. My goal is to center the Wufoo Forms visually on different screen sizes using media queries, however, despite rewriting them multiple times a ...

cssmedia-querieswufoo