"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

Interactive font-awesome icons within an interactive dropdown menu

I am currently facing an issue with using two Fontawesome icons in a clickable dropdown menu. The dropdown menu does not toggle when I click on the icons directly; however, it works when I click on the padding around them. The example provided by W3schools ...

javascripthtmlcssfont-awesome

Tips for invoking a JavaScript class method from an HTML document

I've created a Typescript class that dynamically inserts an HTML element to a page after it's loaded. Here is the code snippet: const calcElement: string = ` <div class="container"> <span class="cc-title">Field</span> ...

javascripthtml

Exploring the integration of Selenium WebDriver with a Polymer website and its Shadow root functionality

When I use Google Chrome console, I can easily click on a Shadow root element using the following code: document.querySelector('html /deep/ next-tab').querySelector('a').click() However, when I tried to do the same thing with web-driv ...

javahtmlselenium

Surprising Outcomes of Negative Margin in jQuery Animation

Unique Project Summary I am currently working on a website that incorporates a sliding menu feature. I have successfully implemented this functionality, and the display remains consistent during the animation transitions for sliding the menu in and out. T ...

javascriptjqueryhtmlioscss

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...

htmlcssdisplay

Eliminating table rows using jQuery

In order to remove table rows from the table below: <div id="tabel"> <table class="tg"> <thead> <tr><td colspan=3>How can I delete rows from a table using jQuery</td></tr> <t ...

jqueryhtmlhtml-table

Issue with displaying elements at intended layering order when parent element has fixed positioning

My web app features both upper and lower elements (div) with a position: fixed. Each element has child popups also with position: fixed. Even though I want to position the popup above its parent element, using z-index doesn't work due to inheritance ...

htmlcsscss-positionz-index

Issue with ngFor displaying only the second item in the array

There are supposed to be two editable input fields for each section, with corresponding data. However, only the second JSON from the sample is being displayed in both sections. The JSON in the TypeScript file appears as follows: this.sample = [ { "se ...

javascripthtmlangulartypescriptangular8

Avoiding conflicts between banners, text, and images for HTML/CSS design

I'm having an issue with the banner I created for my project. It seems to be overlapping with text and images, hiding behind them. How can I fix this? Unfortunately, I can't post the link to my project here due to other files present. The specif ...

javascripthtmlcsswebweb-deployment

The background image fails to load the specified image

I am encountering an issue with utilizing background-image in the style of my HTML page. I am currently developing a login page for my Django application, and when I preview the page, the background image does not appear. Strangely, this code was functioni ...

htmlcssbackgroundbackground-image

Capturing the final image within a WordPress article - an unspecified quantity

My goal is to identify the final image in a Wordpress post content and place a title over it. Each post may contain a different number of images, which is why I need to target the last one specifically. I currently have code that successfully targets the ...

phpjqueryhtmlwordpress

What is the process for adding a Contact Us page to a website?

I recently created a website using html, css and Javascript. I would like to include a 'get in touch' page where visitors can send me messages directly on the site. What steps should I take to make this happen? Is it necessary to set up a databas ...

javascriptcss

Controlling the page scroll when adding data using jQuery

I am encountering an issue with a webpage that displays around 20 pictures in separate divs stacked vertically. Below these 20 pictures, there is a "show more" button that, when clicked, loads another set of 20 pictures and appends them to the existing dat ...

htmljqueryscroll

Transmitting an image from an HTML file to a Node.js server

Hello, I am currently working on capturing frames from a video and converting them into images. However, I am encountering an issue when passing this image to server.js as I am unable to access it and the console shows its type as undefined. Below is the s ...

htmlnode.js

Show a clear box over an HTML table row upon mouseover, without highlighting the row

I'm looking to implement a transparent box, with a button, that surrounds a table row when the user hovers over it. I've searched on Google but all the pages only talk about how to highlight rows on hover. I am currently using JavaScript to add ...

htmlhtml-tabletransparentbox

Using jQuery and AJAX to dynamically pass a variable into the URL parameter in dynamic HTML pages

By utilizing jQuery, I am dynamically updating the content of a div with a form that consists of two textboxes and a button. Upon clicking this button, ajax is employed to retrieve results from a public webservice based on the data gathered from the textbo ...

jqueryhtmlajaxvisual-studioweb-services

Database function call is not producing any results

Initially, the code below was intended to create a new user when starting the quiz, but now it is meant to update an existing user's details. However, I am facing an issue where the addUser() function is not completing as expected even though all inpu ...

phphtmlmysqlsql

Determining the cursor location within a character in a div that is content editable using AngularJS

I am facing challenges with obtaining the cursor caret position within a contenteditable div. Currently, I am utilizing the following function : onBlurArea (field, ev) { ev.preventDefault() const editable = ev.target.childNodes[1].childNodes[2] ...

javascripthtmlangularjs

What could be preventing the background color from changing when attempting to use style.backgroundColor?

My objective is to store the current tab background color in a variable and then use that variable to change the body color. However, for some reason it is not working as expected. Can you help me figure out why? const tabName = 'someId'; var ...

javascripthtml

Switch up text using jQuery on css-tricks.com

I am having trouble with the code I found on a page about toggling text using jQuery from this link. Could someone please explain to me the significance of ':visible'? Thank you. Here is the fiddle link, and below is the code that I copied. Vi ...

jqueryhtmlcss