造型Tumblr像按钮

可悲的是,正如OP所说,Tumblr之类的按钮具有最少的视觉选项,很难用CSS / javascript定位.所以是时候换个新主意……

想法

我们知道两件事：

我们自己的Like Button,在视觉上,应该是我们想要的.文字,图片,网页等

Tumblr Like按钮记录了一个点击,Tumblr在存储数据方面发挥了神奇作用.

如果我们可以在视觉上隐藏Tumblr Like按钮,然后将它放在我们自己的Like按钮上,我们就有了一个风格,工作的按钮！

主题标记

主题标记的示例,这里的关键是为两个Like Buttons都有一个包含元素,并确保Tumblr Like Button位于我们自己的Like Button之前,这样我们就可以利用css中相邻的兄弟选择器.

@H_404_28@<div class="custom-like-button"> {LikeButton} <span class="our_toggle"> &hearts; </span> </div>

呈现标记

渲染/实时代码的示例.主题运算符{LikeButton}现在是< div>与类.like_toggle.

@H_404_28@<div class="custom-like-button"> <div class="like_button"> /* Iframe */ </div> <span class="our_button"> &hearts; </span> </div>

CSS魔术

关键是将Tumblr Like按钮放在我们自己的按钮上方.

@H_404_28@.custom-like-button { position: relative; display: block; width: 40px; height: 40px; cursor: pointer; } /* class for the Tumblr Like Button iframe */ .like_button { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; z-index: 10; } /* Force iframe to fill button */ .like_button iframe { width: 100% !important; height: 100% !important; } /* class for Our Like Button */ .our_button { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; }

田田！您现在应该拥有自己的Like按钮来注册用户！

您还可以在悬停时设置样式：

@H_404_28@/* Hover State */ .like_button:hover + .our_button { color: red; }

当用户注册了类似的内容时：

@H_404_28@/* Liked State */ .like_button.liked + .our_button { background: red; color: white; }

我希望有所帮助！如果你遇到困难我就离开了标记here.