知更鸟Begin主题文章内页中的“阅读全文”按钮美化

虫子君
虫子君
虫子君
588
文章
263
评论
2019年12月8日11:51:48 评论 648 734字阅读2分26秒

上个月中旬的时候,找鸟叔更新了一波begin主题,平时知更鸟还是很好说话的,前提是他不忙的前提下,有一点小问题,都愿意解答的。

更新主题之后,发现新版的主题更新了一些功能,其中最令人喜欢的就是当文章内容过长的时候,主题会自动将大部分的内容折叠起来。类似于现在很多的app上面的“阅读全文”功能是一样的。

不过我觉得我觉得这个阅读全文的按钮有点丑,所以今天趁天气冷不想出门,美化了一下。知更鸟Begin主题文章内页中的“阅读全文”按钮美化

.all-content{padding: 5px 35px;letter-spacing:2px;border-radius: 50px;transition:all .5s;}
.all-content: hover{background-color:#355174; color:#fff;}

默认begin主题中的阅读全文按钮,是没有鼠标经过效果的,这里虫子君使用的css中的(hover)伪类属性,让这个按钮有一定的变化,增加一定的交互效果。

一揽全局发现这个按钮不够“”不够明显,可能会让部分用户注意不到,所以讲按钮的“padding”内边距调大一点。上下改成5像素,左右则设置成35像素。

按钮上面的文字间距显得很窄,跟按钮的风格有一点不搭,所以将按钮文字的间距加宽了两个像素。直接一个css中的letter-spacing就可以了

最后由于整个按钮需要有一个简单的交互效果,所以在hover属性中,背景色设置成深蓝色,然后文字则给成了白色,最后交互的时间设置成0.5秒钟,刚刚好的样式。

周末的时光似乎过的总是很快,今天在家宅着不知道做什么,索性就更新一下内容吧。这算是begin主题美化正式启动的第一个内容,当然,其他文章中的内容如果符合美化begin主题的,自然也是会陆续的迁移到本专题中。

分享你的见闻

如果您有好的内容,比如插件或者主题,欢迎来“给我投稿”相信网友会因为你的帮助而感激。

  • 本文由 发表于 2019年12月8日11:51:48
  • 文章链接:https://chonzi.com/8520.html

您必须才能发表评论!