What is the reason behind my CSS or Sass Transition not functioning properly?

I've been attempting to create a hover effect on a button that transitions by 0.5s, but for some reason it's not working properly. Does anyone have any insight into what might be causing this issue?

Below is the CSS code I've used:

.btn {
    display: inline-block;
    background-image: linear-gradient(90deg, #e34067,#f89c4b);
    padding: 1rem 2rem;
    padding-left: 1.4rem;
    align-items: center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.5s;
}
    .btn p {
        padding-left: 0.5rem;
    }
    .btn:hover {
        background-image: linear-gradient(90deg,#f89c4b, #e34067);
    }
<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</div>

htmlcsssass

Answer №1

It looks like the button was created using a div element. To correct this, you should add the btn class to the div. The updated code would be:

<div type="button" class="add-photo btn"> <a href="#"><i class="fa fa-plus-circle"></i> <p> Add Photo</p> </a> </div>

I recommend avoiding using a div as a button, as discussed here.

Answer №2

A gradient background image cannot be transitioned to another in that manner. However, you can achieve the desired effect using pseudo elements.

.btn {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem 1rem 1.4rem;
  align-items: center;
background-color: #f89c4b;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

.btn:before,
.btn:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  transition: opacity 0.5s;
}

.btn:before {
  background-image: linear-gradient(90deg, #e34067,#f89c4b);
  opacity: 1;
}

.btn:after {
  background-image: linear-gradient(90deg,#f89c4b, #e34067);
  opacity: 0;
}

  p {
position: relative;
padding-left: 0.5rem;
z-index: 5;
  }

.btn:hover:before {
  opacity: 0;
}

.btn:hover:after {
  opacity: 1;
}
<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</div>

Answer №3

To create animated background gradients, use the background-position property.

.btn {
    display: inline-block;
    background-image: linear-gradient(90deg,#f89c4b, #e34067, #f89c4b);
    background-size: 200%;
    background-position: 0 0;
    padding: 1rem 2rem;
    padding-left: 1.4rem;
    align-items: center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: background-position 0.5s;
}
    .btn p {
        padding-left: 0.5rem;
    }
    .btn:hover {
        background-position: 100% 0px;
    }
<div type="button" class="add-photo">
  <a class="btn" href="#"><i class="fa fa-plus-circle"></i>
      <p>  Add Photo</p>
  </a>
</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

trigger a CSS animation using JavaScript upon a specified event

I am attempting to incorporate a class for an autogrow animation effect to a textarea element. Here is a demo: http://jsfiddle.net/d0kmg7d3/15/ var tx = document.getElementsByTagName('textarea'); for (var i = 0; i < tx.length; i++) { tx[i] ...

javascriptcsscss-animations

Design a dynamic rectangular division using CSS and Bootstrap 4 that adapts to different screen sizes

I am encountering difficulties attempting to replicate a full-width rectangle div on a website, particularly with issues related to responsiveness and mobility. Here is an example of the design I am trying to recreate. And here's what I've acco ...

htmlcss

Generate a table inside a bootbox dialog using the data retrieved from an ajax call

I'm currently working on an app that requires attendance to be reported for specific events. I retrieve a list of JSON objects using AJAX. My goal is to create a table within a bootbox dialog that generates new rows for each item in the result from m ...

c#jqueryhtmlajaxbootbox

Ways to convert ng-options to ng-repeat in AngularJS

Currently, I am facing an issue with Angular Material where I cannot use the ng-options directive for select. This is because options are not being created inside the select tag in AngularJS Material. I currently have ng-options="(k.x.y) as k.x.z for k in ...

htmlangularjs

Text does not wrap correctly when placed between elements with the property white-space: nowrap

When applying the white-space: nowrap property to all children of an element, an issue arises in Webkit (and blink) where white space doesn't break between elements as expected: View example on jsFiddle .pairs { width: 180px; overflow: hidde ...

cssgoogle-chromewebkitblink

Ensuring the sort icon is constantly displayed in MudDataGrid

Is there a way to keep the sort icon visible at all times in mudgrid without any default sorting using mudblazor? I have implemented the advanced data grid from the following link:- I have attempted using sortable=true on both the column and datagrid but ...

c#htmlcssmudblazor

differences in the way web pages are displayed in Microsoft Edge and Internet Explorer when compared to

I can't wrap my head around the issue I'm currently facing: it seems that MS Edge and Internet Explorer display things at a similar size to other browsers only when the user's zoom level is set to 150% (not 100%). Am I the only one experien ...

htmlcssinternet-explorermicrosoft-edge

Ways to retrieve dictionary keys as an array in Angular

Here is an example of an Angular dictionary: { ARRAY1: [{...}, {...}, {...}] ARRAY2: [{...}, {...}, {...}] ARRAY3: [{...}, {...}] ARRAY4: [{...}] } I want to show all the keys of arrays from this dictionary on an HTML page. I attempted to do ...

javascripthtmljsonangulartypescript

Error message unset not functioning properly in PHP

Session unset function for the error message is not functioning correctly. Upon clicking the Login button with empty fields, the session works as expected. However, if I refresh or reload the page, an error message Undefined index: message in... appears sp ...

phpmysqlajaxhtml

CSS equal-width table columns

My goal is to create evenly spaced columns like in this example. It used to work in a previous version, but now I can't seem to figure out what's causing the difference. Even when copying the old HTML into a jsfiddle and applying the same CSS, it ...

csscss-tables

Having trouble with aligning HTML elements with Bootstrap v4 framework

In the header, I have a container for the logo and another one for the login form. I want the logo to be on the left and the login form to be positioned at the top right corner. However, when I use float-left for the logo container and float-right for the ...

htmlcssbootstrap-4twitter-bootstrap-4

How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app. <section class='todoapp'> <header id='header'> & ...

javascriptcssember.js

The animation of the submenu on hover in jQuery does not provide a seamless experience

I have created a navigation bar with submenus. Initially, all the bars load with hidden submenus. Upon hovering over a link, the submenu animates in. You can check out my code on jsfiddle: http://jsfiddle.net/6cAaN/ The functionality is mostly working fin ...

jquerycssnavigationhover

I require fixed headers that no longer stick once reaching a specific point

I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...

javascripthtmlcss

Textfield style in Struts2 customization

How can I change the appearance of the textfield? [https://i.sstatic.net/TkQ0i.png] I am trying to remove the background color The code snippet in question: <s:form action ="Update_datos_XML"> <s:hidden id="id" name="id_sesion" value=" ...

htmlcssstruts2

Each time I load the page, it displays differently depending on the browser. I'm struggling to understand the reason

Trying to figure out how to make the navigation bar close when a link is clicked and directed to a section instead of a new page. When on a large screen, I want the nav bar to remain open but automatically close when on a small screen (for example, when th ...

javascriptjqueryhtmlcsstwitter-bootstrap

The canvas map has an unseen boundary on the right, causing all other div sections to be

When I set the width of my google map canvas to 80%, the map itself fills that percentage but leaves a wide space to the right of the canvas, taking up the remaining 20% of the screen. This creates an issue because my div cannot be placed in that space. ...

htmlcsscanvasmaps

The text-align center is not functioning properly within an inline-block HTML table

For my HTML email, I have chosen to use tables for each navigation element. To ensure these tables are displayed inline, I applied display:inline-block; which yielded the desired outcome. However, aligning the text inside the table has proven to be a chall ...

htmlhtml-emailcss

Hidden submission button on form

I'm working on a form that is being validated with specific code limitations. For example, the username field must only contain alphabet characters. The validation function returns either true or false. function isAlphapet() { var alphaExp = /^[a-z ...

javascripthtmlformssubmitshow

Arrange items in a row in the navigation bar

I am currently working on aligning my navbar items instead of having them stack. After switching from Bootstrap 3 to Bootstrap 4 (beta 2), I noticed that they no longer align properly and remain stacked. Below is the code snippet: <!doctype html> ...

htmlbootstrap-4