Question

我想从此CodePen贡献中获取我的网站按钮的CSS代码：http://codepen.io/daviddarnes/pen/VLXxMa

我网站上的按钮的HTML代码是：

<a href="#" class="btn">Read more</a>

但在CodePen中它是：

<button class="button  arrow">Read more</button>

我已经尝试过并改变了.button＆amp;的CSS代码.arrow到.btn并且它可以工作但是：after选择器中的箭头不起作用。

我想要button arrow按钮的CSS代码。

提前致谢！

更新

我已经更改了代码并分叉了一个新的CodePen代码并立即在我的网站上使用它。新的fork在CodePen上工作正常：http://codepen.io/AhmedElgameel/pen/rjPywd

但它在我的网站上无法正常工作！这是我网站上的一个示例：https://wp-me.com/best-wordpress-hosting/

任何想法？！

Answer 1

使用以下代码轻松地将按钮添加到您的博客/网站。

HTML代码：

<a class="btn" href="https://stackoverflow.com">Stack Overflow</a>

<强> CSS：

    .btn {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    position: relative;
    padding: .8em 1em;
    padding-right: 4em;
    background: #009ed8;
    border: none;
    color: #fff!important;
    text-decoration: none;
    transition: .2s;
    box-sizing: border-box;
    margin: 1em 0;
}

.btn:before, .btn:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-top: inherit;
    padding-bottom: inherit;
    width: 2.2em;
    content: "\00a0";
    font-family: 'FontAwesome',sans-serif;
    font-size: 1.2em;
    text-align: center;
    transition: .2s;
    transform-origin: 50% 60%;
}

.btn:before {
    background: rgba(0,0,0,.1);
}

.btn:after {
    content: "\F054";
}

.btn:hover {
    background: #b90c01;
}

我想从此CodePen笔中获取Button的CSS代码

更新

1 个答案: