zoukankan      html  css  js  c++  java
  • css3 data-attribute属性打造漂亮的按钮

    之前介绍了几款css3实现的按钮,今天为网友来款比较新鲜的,用css3的data-attribute属性开发按钮,当鼠标经过显示按钮的详细信息。而且实现过程很简单,几行代码就搞定。大家试一试吧。如下图:


    在线预览   源码下载


    不错吧,贴上实现代码:

    html代码:

      <button data-hover="爱编程(w2bc.com)收集编程资料,web前端案例">
                爱编程</button>

    css代码:

     button
            {
                background: #db701f;
                border: solid 7px #000;
                padding: 20px;
                box-shadow: inset 0 0 6px #824212;
                text-transform: uppercase;
                font-weight: bold;
                font-family: "Tahoma" , sans-serif;
                text-shadow: 1px 1px 3px #824212;
                color: #fff;
                position: relative;
                width: 300px;
                 font-size:16px;
            }
            button:hover
            {
                background: green;
            }
            button:hover:before
            {
                /* ------- THIS IS THE MAGIC ----------------*/
                content: attr(data-hover); /* ------------------------------------------*/
                display: block;
                background: #000;
                position: absolute;
                top: 100%;
                left: -7px;
                right: -7px;
                padding: 15px;
            }
            button:hover:after
            {
                content: "";
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border: solid 10px transparent;
                border-bottom-color: #000;
                bottom: 0;
                left: 50%;
                margin-left: -10px;
                z-index: 2;
            }
            .note
            {
                margin-top: 100px;
                display: block;
            }
  • 相关阅读:
    算法导论:快速排序
    lintcode:打劫房屋 III
    lintcode:打劫房屋II
    lintcode:打劫房屋
    算法导论:二叉搜索树
    算法导论:整齐打印
    砝码称重问题二
    多重背包问题II
    多重背包问题
    lintcode:背包问题II
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/3928312.html
Copyright © 2011-2022 走看看