Can you explain the mechanics behind the animation of the upvote button on steemit.com?

Behold the upvote button of steemit.com:

<span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;">
  <svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="Chevron_Up_Circle"><circle cx="16" cy="16" r="15" stroke="#121313" fill="none"></circle>
         <path d="M16.699,11.293c-0.384-0.38-1.044-0.381-1.429,0l-6.999,6.899c-0.394,0.391-0.394,1.024,0,1.414 c0.395,0.391,1.034,0.391,1.429,0l6.285-6.195l6.285,6.196c0.394,0.391,1.034,0.391,1.429,0c0.394-0.391,0.394-1.024,0-1.414 L16.699,11.293z" fill="#121313"></path>
     </g>
  </svg>
</span>

I'm curious about how the mouseover animation functions on this button. It seems like there is no change in the code above when hovering over it with my mouse.

javascripthtmlcssanimationsvg

Answer №1

There is an interesting animation effect being applied to the span element when hovering over it. Check out the live demo on Fiddle.

a.Voting__button-up, path, circle {
    transition: opacity, fill, stroke .3s ease 0s;
}
a.Voting__button-up:hover circle{
    fill: #06D6A9;
    stroke: #06D6A9;
}
.Voting__button-up .Icon:hover {
    box-shadow: 0 0 0 #4ba2f2;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}
.Voting__button-up .Icon {
    margin-left: 0;
    border-radius: 50%;
}
.Voting__button .Icon {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
@keyframes pulse{
  0% {
      box-shadow: 0 0 0 0 #06d6a9;
  }
  70% {
      box-shadow: 0 0 0 10px rgba(6, 214, 169, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(6, 214, 169, 0);
  }
}
<a href="" class="Voting__button-up">
<span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;">
  <svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="Chevron_Up_Circle"><circle cx="16" cy="16" r="15" stroke="#121313" fill="none"></circle>
         <path d="M16.699,11.293c-0.384-0.38-1.044-0.381-1.429,0l-6.999,6.899c-0.394,0.391-0.394,1.024,0,1.414 c0.395,0.391,1.034,0.391,1.429,0l6.285-6.195l6.285,6.196c0.394,0.391,1.034,0.391,1.429,0c0.394-0.391,0.394-1.024,0-1.414 L16.699,11.293z" fill="#121313"></path>
     </g>
  </svg>
</span>
</a>

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

Use jQuery to switch back and forth between the login and registration forms on a single

I've set up two forms, one for login and one for registration, with the default view showing the login form. There's a link that says "Don't have an account?" and when it's clicked, the registration form will display while the login for ...

javascriptjqueryhtml

Show the helper text when a TextField is selected in Material UI

I would like the error message to only show up when a user clicks on the TextField. Here's my code: import React, { useState, useEffect } from 'react'; import { TextField, Grid, Button } from '@material-ui/core'; const ReplyToComm ...

javascriptreactjsmaterial-ui

What is the best way to make a child div's height match its parent's height?

I am facing an issue with aligning 2 divs on the same line, separated by a vertical line while ensuring that the line always has the height of the parent div. Despite trying various solutions suggested online, none seem to work for me. I cannot use positi ...

htmlcss

"Integrating `react-textarea-code-editor` with Remix: A Step-by-Step Guide

Upon loading the root of my web app, I encountered an error. The react-textarea-code-editor component is accessed via a separate route. The same error persisted even after following the suggestions provided here: Adding react-textarea-code-editor to the ...

javascriptreactjsremix.run

Adding clickable padding to a Draft.js editor can enhance the user experience and make the editing process

Is there a way to apply padding to the Draft.js Editor so that clicking on the padding area selects the Editor? If I add padding directly to the container div of the Editor, the padding displays properly but clicking on it does not enable writing in the E ...

javascriptcssreactjsdraftjs

Encountered a 'SyntaxError: await is only valid in async function' error while trying to utilize the top-level await feature in Node v14.14.0

I'm excited to use the new top-level await feature that was introduced in Node version 14.8. For more information, you can check out this link and here. I did a thorough search but couldn't find any questions related to issues with the new featur ...

javascriptnode.jsexpressasynchronousasync-await

Modify the size of images retrieved from the Twitch API

I have a request to the Twitch API to retrieve a list of top games and show their box art, but I'm facing an issue where the image will only display if I adjust the width and height values in the provided link. Is there a way to modify these values wi ...

javascriptnode.jsapiexpressejs

Submitting a form using an anchor tag in Angular 8: A step-by-step guide

I have a question about how to submit form data using hidden input fields when a user clicks on an <a> tag. <form action="/submit/form/link"> <input type="hidden" [attr.value]="orderNumber.id" /> <input type="hidden" [attr.value]= ...

javascriptangulartypescriptformssubmit

Firebase Hosting is not compatible with Express session

After setting up my code as shown below, I noticed that sessions are being persisted and the page is able to count the number of visits. app.set('trust proxy', true) // The documentation specifies '1' instead of 'true' app.u ...

javascriptfirebaseexpressfirebase-hosting

Can you explain the significance of 'height: 0;' in CSS coding?

I've recently come across some outdated CSS code that sets the height to height: 0; in multiple places. I'm curious about what this 0 signifies and what unit it is measured in. If anyone could provide some insight, I would greatly appreciate it. ...

htmlcss

Transferring information between pages through ajax communication

I am working with two pages named testing.php and submission.php. My goal is to send data from testing.php to be displayed on submission.php. For example, when a user clicks on test1, they should be directed to submission.php where I want to display the te ...

javascriptphpjqueryajax

Please ensure that all fields in the form are filled out before clicking the enable button

Is it possible to enable the button only when all fields are filled out in a form? It's easy if there's just one field, but I have multiple fields with a select field as well. I'm not sure how to do this. Here's the form I've creat ...

javascriptreactjsmaterial-ui

Bypass ajax request with the use of a returned promise

I've come across a scenario where I have a function within a class that is designed to return a promise for deleting an item. Here's what the function looks like: function Delete(){ // if(this.id == ""){ // return ?; // } ...

javascriptjquery

I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

A problem is occurring with the ng-class directive in this HTML code, which is generating seats using the ng-repeat directive. The colors are not being added properly when a seat is selected. If you'd like to view my code, it can be found in this JSf ...

cssangularjsangularjs-ng-repeatng-class

How to change the image source using jQuery when hovering over a div and set its class to active?

I am working with a div structure that looks like this: <div class="row margin-bottom-20"> <div class="col-md-3 service-box-v1" id="div1"> <div><a href="#"><img src="path" id="img1" /></a></div> ...

javascriptjqueryhtmlcss

"Customizing the website's font: A step-by-step guide to replacing the default Roboto font with a custom font

Despite my efforts to globally override the font, I am still encountering instances where the Roboto font is not being replaced, particularly on MUI select and autocomplete components. import { createTheme } from '@material-ui/core/styles'; // A ...

cssreactjsmaterial-ui

Change a JavaScript object into an array with different options while still maintaining the keys

I am attempting to transform the following JavaScript object: image_uploads: [ 0: { upload_id: 50, }, 1: { upload_id: 51, }, 2: { upload_id: 52, }, ] Into separate entries using this structure for inclusion in the body of a POST r ...

javascriptarraysobjectpost

Providing structured Express app to deliver HTML and JavaScript content

Currently, I am working with Express and facing a seemingly simple challenge. Here is the structure of my directories: |-config |---config.js |---routes.js |-server.js |-scripts |---controllers |------controllers.js |---directive ...

javascriptnode.jsexpress

AngularJS and ExpressJS clash in routing (Oops, Crash!)

When setting up routing in angularjs and expressjs, I have created app.all('/*'...) to enable rendering index.html. However, whenever I use /*, the page crashes with an "Aw, Snap!" message. angularjs home.config(function($routeProvider,$locatio ...

javascriptangularjsnode.jsexpress

Guide on displaying ajax data using PHP

I'm attempting to display the user-entered data by using AJAX to transfer it and then trying to print or echo it with PHP, but I'm having trouble getting it to work. enter code here Here is my code: <html> <head> <title> ...

javascriptphphtmlajaxecho