csscss-selectorspinterest

Fix Pinterest CSS

I am trying to create custom button for pinterest. I was able to use a custom image as a button but it is not working properly.

Here is the CSS I am using.

span[data-pin-log="button_pinit_bookmarklet"] {
}
span[data-pin-log="button_pinit_bookmarklet"]::after {
  content: url('../images/icon.png');
}

The ScreenShot

In the ScreenShot I have marked the button I am working on using red color. I have marked the areas I want to get rid off using blue color.

I am stuck on this problem for more than 12 hours. So, any help will be really appreciated.

You can get the Pinterest Button Using these codes

<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
Solution

  • For custom button

    The data-pin-custom="true" attribute is important because it keeps your custom markup, including your HTML and CSS.

    <a href="https://www.pinterest.com/pin/create/button/"
   data-pin-do="buttonBookmark"
   data-pin-custom="true">
    --YOUR CUSTOM HTML--
</a>

    --YOUR CUSTOM HTML-- Given likes as below

    <img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">


    <p>Ordinary button</p>

<a data-pin-do="buttonBookmark" href="https://www.pinterest.com/pin/create/button/"></a>
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

<p>Custom button</p>

<a data-pin-do="buttonPin" href="" data-pin-custom="true">
  <img src="https://developers.pinterest.com/static/img/badge.svg" width="25" height="25">
</a>

    For more information: Visit https://developers.pinterest.com/docs/widgets/save/?