记录一个有趣的按钮样式_有趣的button组件

相关文章推荐

打酱油的椰子 · 虚拟机安装使用经验_vmware怎样使用属于 ...· 1 周前 ·

深情的豌豆 · gem i ...· 1 月前 ·

有爱心的饼干 · qt窗口最大化和最小化 - CSDN文库· 2 月前 ·

逆袭的沙滩裤 · 如何从TypeScript调用服务器端JSP ...· 5 月前 ·

含蓄的汽水 · jQuery validate(submit ...· 1 年前 ·

在 DataSet - vis.js - A dynamic, browser based visualization library. 上面看到的一个好玩的箭头

记录一下这个样式，感觉以后能用到

大概长下面这个样子

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            button::after {
                background-image: url(./arrow.svg);
                background-position: top 0 right 0;
                background-repeat: no-repeat;
                background-size: 4.3em;
                content: '"Just search it": Override this with localized text!!!!';
                display: block;
                margin: 1em 0 0 0;
                opacity: 0.4;
                padding: 3em 4.3em 0 0;
                position: absolute;
                right: 3em;
            button {
                float: right;
        </style>
    </head>
        <button>click me!</button>
    </body>
</html>
竟然不能上传svg，就截个图吧 
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！
日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～
Demo代码
.QPushButton {
        background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, 
stop:0 rgba(233, 233, 233, 255), 
stop:0.35 rgba(220, 220, 220, 255), 
stop:0.5 rgba(213, 213, 213, 255), 
stop:0.65 rgba(230, 230, 230, 255), 
stop:1 r...
                    CSDN-Ada助手: 
                    恭喜你写了又一篇有趣的博客，标题也很吸引人，让人想要马上点进去看看。你的创作精神真的很值得赞扬。下一步建议可以尝试探索更多的样式，或者探索一下其他方面的创作，这样可以让你的博客更加多元化。再次感谢你的分享，期待你的下一篇作品。
CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3