"Can anyone explain why the text color of my font changes during a transition within a

Check it out on jsfiddle as well: https://jsfiddle.net/phmttrsh/

#btn {
    font-size: 16px;
    height: 34px;
    width: 120px;
    border: 1px solid #20ACB3;
    text-align: center;
    line-height: 34px;
    background-color: #20ACB3;
    color: #ffffff;
    border-radius: 5px;
    transition: transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01);
}

 #btn:hover {
        cursor: pointer;
        transform: scale(1.05);
    }
<div id="btn">Click</div>

On Safari, when hovering over the button, the font color changes briefly. Why does this occur?

htmlcss

Answer №1

#button {
    font-size: 16px;
    height: 34px;
    width: 120px;
    border: 1px solid #20ACB3;
    text-align: center;
    line-height: 34px;
    background-color: #20ACB3;
    color: #ffffff;
    border-radius: 5px;
    -webkit-transition : transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01) , color 200ms; 
   -moz-transition : transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01) , color 200ms;
    -o-transition : transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01) , color 200ms; 
    transition : transform 200ms cubic-bezier(0.25, 0.39, 0.39, 2.01) , color 200ms; 
}

 #button:hover {
        cursor: pointer;
        transform: scale(1.05);
        color:#fff
    }
<div id="button">Press Here</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

Tips for aligning the text in a navigation bar to the center

My CSS skills are not very strong. How can I center the text "My Website" in my navbar based on this code? You can view a working example on JSFiddle here: https://jsfiddle.net/cvp8w2tf/2/ Thank you for your assistance! ...

htmlcsstwitter-bootstrapnavbarcenter

When you hover over it, the text moves above the background content

I am looking to enhance my table by having the text expand and hover over the content with a white background. I have achieved the expand effect, but I am struggling to get the overflow to work properly. You can view the code in action on JsFiddle: JsFiddl ...

htmlcsshover

Ways to fill ng-style with a CSS object

Creating a dynamic form to manipulate CSS properties in real time has been my latest project. I've managed to define the CSS property names and values within an object, but now I'm struggling to style the item elegantly on the page as the user in ...

cssangularjs

Using Jquery to determine if a div is empty, excluding any content before or after it

I'm looking to use JQuery to determine if a Div is empty without taking into account any content added before or after it. When checking for emptiness, I want to ignore anything placed before or after the div. $(function(){ if($('#content&ap ...

jqueryhtmlcss

Discover a helpful tip for using Pentadactyl with StackExchange's voting buttons

Does anyone know how to enable hinting for voting arrows on StackExchange using Pentadactyl (a fork of Vimperator)? I've tried removing my .pentadactylrc file and restarting Firefox, but still can't figure out how to upvote questions and answers ...

javascriptcssfirefoxvimperator

The Twitter widget is not staying in sync with the rest of the page when scrolling on

Twitter provides a widget that is widely used by many people. Below is the code provided by Twitter: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', ...

htmlcssinternet-explorerscroll

How to target the last child in Flexbox using CSS order property

Is there a way to correctly detect the last child after rearranging divs using flex order? Even though I have set the order in the CSS, it is still recognizing the last child based on the DOM tree. Since the items are dynamic, we can't rely on nth-chi ...

javascriptjquerycss

Content within the Iframe is in the process of loading, followed by

Exploring the code below: <iframe id="myframe" src="..."></iframe> <script> document.getElementById('myframe').onload = function() { alert('myframe is loaded'); }; </script> Is it a possibility that the ifra ...

javascripthtmliframeonload

Implementing CSS Media Print, tables elegantly transition to a fresh page

I am encountering a challenge when it comes to printing my dynamic table along with some preceding text. It seems that sometimes the table begins on a new page, resulting in the header test being isolated on the first page and only displaying the table on ...

htmlcssprinting

Encoding and Displaying Characters in HTML with UTF-8

I am experiencing an issue with UTF-8 characters in the page title. I would like to include the music symbol ♫ on the page title. The strange thing is that sometimes it displays correctly (in Google Chrome) and other times it shows a square symbol indic ...

javascripthtmlencoding

What Makes Bracket Notation Essential in HTML5?

I recently came across an interesting discussion on the Code Review StackExchange site about best practices for creating forms with multiple rows of identical form inputs. Joseph Silber suggested using bracket notation and avoiding IDs altogether in this s ...

htmlweb-standards

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

javascripthtmltwitter-bootstrap

The align-self-center property in Twitter Bootstrap Flex does not properly center elements vertically

I recently started working with twitter bootstrap 4.4.1 and flex to create a unique layout for my project. My main goal is to have a navbar at the top and the content displayed in the middle of the screen, as shown in the image here: https://i.sstatic.net ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

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 ...

htmlcsssizeinteractive

Guide to showing an HTML string retrieved from MongoDB with the help of Express

I need help with displaying or rendering an HTML string retrieved from the database. Any assistance would be greatly appreciated. Below is the controller function responsible for rendering the data: exports.previewPageView = (req, res, next) => { / ...

htmlnode.jsmongodbexpress

I'm having trouble anchoring my images to a specific spot on the webpage in HTML

After creating my divs in css and linking them to my index file, I encountered an issue when zooming out of the page. The images would shift to the left while the background remained centered. I needed help figuring out how to keep an image fixed on the pa ...

htmlcssfixed

Transform the initial HTML table row into a header row for every table by utilizing XSLT

My XML file contains HTML content that I need to manipulate. Previously, I used <xsl:copy-of select="customFields/customField[@name='mainContent']/html"/> to bring the content to the correct location. Now, I have a new requirement to conver ...

htmlxmlxslt

Smooth scrolling in JavaScript can lead to unexpected jumps when using scroll-margin-top

I am currently working on implementing smooth scrolling into my website using JavaScript. However, I have run into a problem with CSS property scroll-margin-top causing a sudden jump at the end. The CSS I am using for scroll margins looks like this: class ...

javascriptcsssmooth-scrolling

Is there a way to change a class on an anchor element without disrupting its functionality?

The code snippet provided includes an anchor tag with classes for "window" and "less" applied. Is there a way to eliminate the anchor tag while still keeping the classes intact in the code, ensuring that the functionality remains unchanged? ...

htmlcssanchor

Incorporating external files into Javascript code may cause issues with its functionality

Currently, I have a fully developed PHP theme that I am in the process of designing. Within this theme, I have integrated an image slideshow plugin to enhance its functionality. The following code represents the implementation of the image slideshow: &l ...

javascriptphpjqueryhtmlcss