twitter_star.css

/* Reference: https://userstyles.org/styles/120402/twitter-s-fav-button-back */
/* The is the old default star, no animation */
.HeartAnimationContainer:before,.Icon--heart:before{content:"\f147";display:block;font-family:"rosettaicons";font-weight:normal;font-style:normal;text-align:center;-webkit-font-smoothing:antialiased;}
.ProfileTweet-action--favorite.withHeartIcon.is-animating .HeartAnimation,.HeartAnimation{display:none!important;}
.tweet-action[rel="favorite"]:hover,.tweet-detail-action[rel="favorite"]:hover,.tweet-action[rel="favorite"]:focus,.tweet-detail-action[rel="favorite"]:focus,.tweet-action[rel="favorite"]:active,.tweet-detail-action[rel="favorite"]:active,.tweet-action.is-selected[rel="favorite"],.Icon--favorited,.Icon--colorFavorited,.ProfileTweet-action--favorite .ProfileTweet-actionButton:hover *,.ProfileTweet-action--favorite .ProfileTweet-actionButton:focus,.ProfileTweet-action--favorite .ProfileTweet-actionCount:hover,.ProfileTweet-action--favorite .ProfileTweet-actionCount:focus,.tweet.favorited .tweet-actions .Icon--favorite,.tweet.favorited .ProfileTweet-actionList .Icon--favorite,.tweet.favorited .ProfileTweet-action--favorite .ProfileTweet-actionCount,.Icon--colorHeart,.Icon--circleActiveHeart,.Icon--heartBadge,.ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionButton:hover,.ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionButton:focus,.ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionCount:hover,.ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionCount:focus,.favorited .ProfileTweet-action--favorite .Icon--heart,.favorited .ProfileTweet-action--favorite.withHeartIcon .ProfileTweet-actionButtonUndo,.favorited .ProfileTweet-action--favorite .ProfileTweet-actionButtonUndo{color:#FFA200!important;}

.ProfileTweet-action--retweet .ProfileTweet-actionButton:hover,.ProfileTweet-action--retweet .ProfileTweet-actionButton:focus,.ProfileTweet-action--retweet .ProfileTweet-actionCount:hover,.ProfileTweet-action--retweet .ProfileTweet-actionCount:focus,.Icon--retweeted,.Icon--colorRetweeted,.ProfileTweet-action--retweet .ProfileTweet-actionButton:hover *,.ProfileTweet-action--retweet .ProfileTweet-actionButton:focus,.ProfileTweet-action--retweet .ProfileTweet-actionCount:hover,.ProfileTweet-action--retweet .ProfileTweet-actionCount:focus,.Icon--retweeted,.Icon--colorRetweeted,.tweet.retweeted .Icon--retweet,.tweet.retweeted .ProfileTweet-action--retweet .ProfileTweet-actionButtonUndo{color:#0F961A!important;}

.hearty .icon-favorite:before{content:"\f007"!important;}.Icon--heartBadge:before{content:"\f001"!important;}

.prf [data-type="favorites"]:hover *,.tweet-action[rel="favorite"]:hover,.tweet-detail-action[rel="favorite"]:hover,.tweet-action[rel="favorite"]:focus,.tweet-detail-action[rel="favorite"]:focus,.tweet-action[rel="favorite"]:active,.tweet-detail-action[rel="favorite"]:active,.tweet-action[rel="favorite"].is-selected,.is-favorite .icon-favorite-toggle,.hearty .icon-favorite-color{color:#FFA200!important;}

.tweet:before,.tweet:after,.ProfileTweet-header:before{display:inline-block;vertical-align:text-top;background-image:url(https://abs.twimg.com/a/1431997920/img/t1/twitter_web_sprite_icons.png);
background-repeat:no-repeat;position:absolute;top:0;right:0;visibility:hidden;width:24px;height:24px;}

.favorited:before,.favorited:after,.is-favorited .ProfileTweet-header:before{content:" ";background-position:-30px -450px;visibility:visible;}

.retweeted:before,.retweeted:after{content:" ";background-position:0 -450px;visibility:visible;}
.favorited.retweeted:before,.favorited.retweeted:after,.is-retweeted .ProfileTweet-header:before,.is-retweeted.is-favorited .ProfileTweet-header:before{content:" ";background-position:-60px -450px;visibility:visible;}


/* Belows are imitated star, with animation */
/*
.HeartAnimation {
    background: url("https://pbs.twimg.com/media/CS9U_wmUsAAzuUz.png:large");
    background-size: 2900%;
    background-position: left;
}

.ProfileTweet-action--favorite .ProfileTweet-actionButton:hover .HeartAnimation, .ProfileTweet-action--favorite .ProfileTweet-actionButton:focus .HeartAnimation, .favorited .ProfileTweet-action--favorite .HeartAnimation {
    background-position: right;
}

.Icon--heartBadge {
    color: #ffac33;
}

.Icon--heartBadge:before {
    content: "";
}
*/

content: ""; determines the icon shape, heart or star, on the Notification page left to the tweets.

For the Favo action button, it is determined by the PNG in the .HeartAnimation section.

The PNG (with alpha) is composed of 29 frames of 35x35px concatenated horizontally. The main icon body should be around 12x10px only or would look too large. background-size must be 2900~3000% or the icon would drift if you hover over it. The left-most frame is the default image prior being clicked. The right-most frame is the final appearance.

adopted a CSS found on user-style by default (the old star favour). If you like the animated one, comment out the upper section and uncomment the lower part