WordPressの抜粋のプラグインのAdvanced Exerptの「続きを読む」のボタンをかっこよくするコードです。これで別の抜粋プラグインの高価なプレミアム版を買わなくてすみます。
.read-more {
padding-top: 10px;
padding-bottom: 13px;
font-size: 14px;
}
.read-more {
background: #FFCD02; /* Old browsers */
background: -moz-linear-gradient(top, #FFCD02 0%, #FF9500 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFCD02), color-stop(100%,#FF9500)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FFCD02 0%,#FF9500 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FFCD02 0%,#FF9500 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #FFCD02 0%,#FF9500 100%); /* IE10+ */
background: linear-gradient(to bottom, #FFCD02 0%,#FF9500 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCD02', endColorstr='#FF9500',GradientType=0 ); /* IE6-9 */
color: #fff;
font-size: inherit;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow : 1px 1px 3px 0px rgba(50, 50, 50, 0.6);
-moz-box-shadow : 1px 1px 3px 0px rgba(50, 50, 50, 0.6);
box-shadow : 1px 1px 3px 0px rgba(50, 50, 50, 0.6);
border: 1px solid #FF9500;
padding: 10px 20px;
outline: none;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
font-weight: 700;
line-height: 1em;
display: inline-block;
margin-right: 2px;
cursor: pointer;
background-position: 0px 0px;
transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
width: auto;
text-decoration: none;
}
a.read-more:hover {
color:#0000ff;
background: #FFD324; /* Old browsers */
background: -moz-linear-gradient(top, #FFD324 0%, #FF9500 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFD324), color-stop(100%,#FF9500)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FFD324 0%,#FF9500 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FFD324 0%,#FF9500 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #FFD324 0%,#FF9500 100%); /* IE10+ */
background: linear-gradient(to bottom, #FFD324 0%,#FF9500 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFD324', endColorstr='#FF9500',GradientType=0 ); /* IE6-9 */
}
a.read-more span {
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}某抜粋プラグインのソースコードの一部を元にして、Advanced Exerptに合わせて、ちょっと改造したものです。だから、その抜粋プラグインとそっくりになります。なお、オリジナルのコードにあった誤りは修正してあります。
こちらの方がきれいだと思います。