Create custom social share icons which share current page url

Question

I am trying to develop an widget which has social sharing buttons when clicked should share the current page'e url to respective social media website. For e.g, I tried to embed twitter share button referring from here and pasted the following code inside my html:

   <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"  data-url="https://www.google.com" data-show-count="false"></a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8">

but I don't want my button to look that way, I modified the styles for the button by changing the class name of tag, appearance changed but the button is not working the it's supposed to work. It opens a twitter page as following:

I want to retain the functionality of the twitter share icon but also change the style of the button.While clicking share, it should look something like:

Answer 1

Twitters url accepts many parameters, that change how share page looks like:

https://twitter.com/intent/tweet?hashtags=demo
    &original_referer=https%3A%2F%2Fdeveloper.twitter.com%2Fen%2Fdocs%2Ftwitter-for-websites%2Ftweet-button%2Foverview
    &ref_src=twsrc%5Etfw
    &related=twitterapi%2Ctwitter
    &text=Hello%20world
    &tw_p=tweetbutton
    &url=https%3A%2F%2Fexample.com%2Ffoo
    &via=twitterdev

Looks like you want to use url parameter.

https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com%2Ffoo

From https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview