CSS制作简单好看的阅读全文按钮
上一次教大家制作阅读全文按钮时，是用到了transition这个过渡属性，实现了从绿色到红色的渐变，并且有0.6秒的延迟展示。今天我们通过gradient这个CSS渐变属性，来制作一个类似效果的阅读全文按钮。
.reed .jieshao p.read-more{text-align:right;margin-bottom:15px;}
.reed .jieshao p.read-more a{padding:6px 10px 5px;color:#ffffff;background:#d14553;background:-webkit-linear-gradient(top, #c2515d, #14553);background:-moz-linear-gradient(top, #c2515d, #f5f5f5);background:-ms-linear-gradient(top, #c2515d, #14553);background:-o-linear-gradient(top, #c2515d, #14553);background:linear-gradient(top, #c2515d, #14553);border-radius:5px;}
.reed .jieshao p.read-more a:hover{background:#a26bc8;background:-webkit-linear-gradient(top, #a377c2, #a26bc8);background:-moz-linear-gradient(top, #a377c2, #a26bc8);background:-ms-linear-gradient(top, #a377c2, #a26bc8);background:-o-linear-gradient(top, #a377c2, #a26bc8);background:linear-gradient(top, #a377c2, #a26bc8);text-decoration:none;}下方是鼠标移入和移出时的效果：
调用方式为：
<p class="read-more"><a href="#">阅读全文</a></p>
