按钮超链接

作者: 敏姐姐_e9d0 | 来源:发表于2018-11-09 20:11 被阅读0次

按钮超链接
按钮
读书笔记—《交互设计精髓》第21章控件
bootstrap超链接变按钮
linkbutton(按钮)
一个炫酷的按钮
django学习笔记6--博客主页面和文章页
3_TornadoFX_超链接+文件选择，文本域，文字区域，单选
2018-08-06第一天总结
SpreadJS学习笔记-单元格类型

好吧，其实一点都不炫酷，但以我一个小白的身份，觉得很神奇，给大家分享下。当然，大家可以在原代码的基础上进行添加修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .demo a {
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            text-align: center;
            background:cornflowerblue;
            color: black;
            font: bold 20px/50px Arial;
            margin-right: 5px;
            text-decoration: none;
            margin: 5px;
        }
        a[href*="file"]{
            background: red;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links_item first" id="first" >1</a>
    <a href="" class="links active item" title="test website" target="_blank" >2</a>
    <a href="sites/file/test.html" class="links item"  >3</a>
    <a href="sites/file/test.png" class="links item" > 4</a>
    <a href="sites/file/image.jpg" class="links item" >5</a>
    <a href="efc" class="links item" title="website link" >6</a>
    <a href="/a.pdf" class="links item" >7</a>
    <a href="/abc.pdf" class="links item" >8</a>
    <a href="abcdef.doc" class="links item" >9</a>
    <a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>
</html>

效果图