有时候我们的博客文章列表需要阅读全文按钮,怎么做才能炫酷有好看?今天特地给自己别搞了个包裹式类似别针一样卡在文章列表上,下面直接贴代码:
1、html
代码如下:
<div class="read-all">阅读全文 >></div>
2、css
代码如下:
<style> .read-all{ position: absolute; background: #ed1c24; bottom: 10px; right: -8px; color: #fffcfc; border-radius: 2px 2px 0 2px; padding: 3px 10px; text-transform: uppercase; font-weight: 700; font-size: 14px; text-shadow: -1px -1px 0 rgba(0,0,0,.3); } .read-all::before { position: absolute; content: ' '; bottom: -8px; right: 0; height: 0; width: 0; border-top: 4px solid #ed1c24; border-left: 4px solid #ed1c24; border-right: 4px solid transparent; border-bottom: 4px solid transparent; } </style>
我们可以通过修改padding
属性来调整按钮的大小,通过绝对定位来调节你想要显示的位置,修改背景色来调整按钮颜色,下面我们来贴下以上代码的效果:
访问具体效果请点击:Java前端学习知识请访问潘子夜个人博客