HTML好看的动态交互按钮

已于 2022-12-22 14:04:02 修改
阅读量964 收藏 12
点赞数 3
分类专栏： HTML CSS Web前端 文章标签： html css 前端
于 2022-12-22 14:02:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Memory64/article/details/128407801
版权
Web前端 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
CSS
3 篇文章 0 订阅
订阅专栏
HTML
2 篇文章 0 订阅
订阅专栏 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .frame {
            width: 50%;
            margin: 40px auto;
            text-align: center;
        }

        button {
            margin: 20px;
        }

        .custom-btn {
            width: 130px;
            height: 40px;
            color: #fff;
            border-radius: 5px;
            padding: 10px 25px;
            font-family: 'Lato', sans-serif;
            font-weight: 500;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            outline: none;
        }

        /* 1 */
        .btn-1 {
            background: rgb(6, 14, 131);
            background: linear-gradient(0deg, rgba(6, 14, 131, 1) 0%, rgba(12, 25, 180, 1) 100%);
            border: none;
        }

        .btn-1:hover {
            background: rgb(0, 3, 255);
            background: linear-gradient(0deg, rgba(0, 3, 255, 1) 0%, rgba(2, 126, 251, 1) 100%);
        }

        /* 2 */
        .btn-2 {
            background: rgb(96, 9, 240);
            background: linear-gradient(0deg, rgba(96, 9, 240, 1) 0%, rgba(129, 5, 240, 1) 100%);
            border: none;

        }

        .btn-2:before {
            height: 0%;
            width: 2px;
        }

        .btn-2:hover {
            box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
                -4px -4px 6px 0 rgba(116, 125, 136, .5),
                inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
                inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
        }


        /* 3 */
        .btn-3 {
            background: rgb(0, 172, 238);
            background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
            width: 130px;
            height: 40px;
            line-height: 42px;
            padding: 0;
            border: none;

        }

        .btn-3 span {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        .btn-3:before,
        .btn-3:after {
            position: absolute;
            content: "";
            right: 0;
            top: 0;
            background: rgba(2, 126, 251, 1);
            transition: all 0.3s ease;
        }

        .btn-3:before {
            height: 0%;
            width: 2px;
        }

        .btn-3:after {
            width: 0%;
            height: 2px;
        }

        .btn-3:hover {
            background: transparent;
            box-shadow: none;
        }

        .btn-3:hover:before {
            height: 100%;
        }

        .btn-3:hover:after {
            width: 100%;
        }

        .btn-3 span:hover {
            color: rgba(2, 126, 251, 1);
        }

        .btn-3 span:before,
        .btn-3 span:after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            background: rgba(2, 126, 251, 1);
            transition: all 0.3s ease;
        }

        .btn-3 span:before {
            width: 2px;
            height: 0%;
        }

        .btn-3 span:after {
            width: 0%;
            height: 2px;
        }

        .btn-3 span:hover:before {
            height: 100%;
        }

        .btn-3 span:hover:after {
            width: 100%;
        }

        /* 4 */
        .btn-4 {
            background-color: #4dccc6;
            background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
            line-height: 42px;
            padding: 0;
            border: none;
        }

        .btn-4:hover {
            background-color: #89d8d3;
            background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
        }

        .btn-4 span {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        .btn-4:before,
        .btn-4:after {
            position: absolute;
            content: "";
            right: 0;
            top: 0;
            box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .9),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
                inset -4px -4px 6px 0 rgba(255, 255, 255, .9),
                inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
            transition: all 0.3s ease;
        }

        .btn-4:before {
            height: 0%;
            width: .1px;
        }

        .btn-4:after {
            width: 0%;
            height: .1px;
        }

        .btn-4:hover:before {
            height: 100%;
        }

        .btn-4:hover:after {
            width: 100%;
        }

        .btn-4 span:before,
        .btn-4 span:after {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .9),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
                inset -4px -4px 6px 0 rgba(255, 255, 255, .9),
                inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
            transition: all 0.3s ease;
        }

        .btn-4 span:before {
            width: .1px;
            height: 0%;
        }

        .btn-4 span:after {
            width: 0%;
            height: .1px;
        }

        .btn-4 span:hover:before {
            height: 100%;
        }

        .btn-4 span:hover:after {
            width: 100%;
        }

        /* 5 */
        .btn-5 {
            width: 130px;
            height: 40px;
            line-height: 42px;
            padding: 0;
            border: none;
            background: rgb(255, 27, 0);
            background: linear-gradient(0deg, rgba(255, 27, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
        }

        .btn-5:hover {
            color: #f0094a;
            background: transparent;
            box-shadow: none;
        }

        .btn-5:before,
        .btn-5:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            height: 2px;
            width: 0;
            background: #f0094a;
            box-shadow:
                -1px -1px 5px 0px #fff,
                7px 7px 20px 0px #0003,
                4px 4px 5px 0px #0002;
            transition: 400ms ease all;
        }

        .btn-5:after {
            right: inherit;
            top: inherit;
            left: 0;
            bottom: 0;
        }

        .btn-5:hover:before,
        .btn-5:hover:after {
            width: 100%;
            transition: 800ms ease all;
        }


        /* 6 */
        .btn-6 {
            background: rgb(247, 150, 192);
            background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
            line-height: 42px;
            padding: 0;
            border: none;
        }

        .btn-6 span {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        .btn-6:before,
        .btn-6:after {
            position: absolute;
            content: "";
            height: 0%;
            width: 1px;
            box-shadow:
                -1px -1px 20px 0px rgba(255, 255, 255, 1),
                -4px -4px 5px 0px rgba(255, 255, 255, 1),
                7px 7px 20px 0px rgba(0, 0, 0, .4),
                4px 4px 5px 0px rgba(0, 0, 0, .3);
        }

        .btn-6:before {
            right: 0;
            top: 0;
            transition: all 500ms ease;
        }

        .btn-6:after {
            left: 0;
            bottom: 0;
            transition: all 500ms ease;
        }

        .btn-6:hover {
            background: transparent;
            color: #76aef1;
            box-shadow: none;
        }

        .btn-6:hover:before {
            transition: all 500ms ease;
            height: 100%;
        }

        .btn-6:hover:after {
            transition: all 500ms ease;
            height: 100%;
        }

        .btn-6 span:before,
        .btn-6 span:after {
            position: absolute;
            content: "";
            box-shadow:
                -1px -1px 20px 0px rgba(255, 255, 255, 1),
                -4px -4px 5px 0px rgba(255, 255, 255, 1),
                7px 7px 20px 0px rgba(0, 0, 0, .4),
                4px 4px 5px 0px rgba(0, 0, 0, .3);
        }

        .btn-6 span:before {
            left: 0;
            top: 0;
            width: 0%;
            height: .5px;
            transition: all 500ms ease;
        }

        .btn-6 span:after {
            right: 0;
            bottom: 0;
            width: 0%;
            height: .5px;
            transition: all 500ms ease;
        }

        .btn-6 span:hover:before {
            width: 100%;
        }

        .btn-6 span:hover:after {
            width: 100%;
        }

        /* 7 */
        .btn-7 {
            background: linear-gradient(0deg, rgba(255, 151, 0, 1) 0%, rgba(251, 75, 2, 1) 100%);
            line-height: 42px;
            padding: 0;
            border: none;
        }

        .btn-7 span {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        .btn-7:before,
        .btn-7:after {
            position: absolute;
            content: "";
            right: 0;
            bottom: 0;
            background: rgba(251, 75, 2, 1);
            box-shadow:
                -7px -7px 20px 0px rgba(255, 255, 255, .9),
                -4px -4px 5px 0px rgba(255, 255, 255, .9),
                7px 7px 20px 0px rgba(0, 0, 0, .2),
                4px 4px 5px 0px rgba(0, 0, 0, .3);
            transition: all 0.3s ease;
        }

        .btn-7:before {
            height: 0%;
            width: 2px;
        }

        .btn-7:after {
            width: 0%;
            height: 2px;
        }

        .btn-7:hover {
            color: rgba(251, 75, 2, 1);
            background: transparent;
        }

        .btn-7:hover:before {
            height: 100%;
        }

        .btn-7:hover:after {
            width: 100%;
        }

        .btn-7 span:before,
        .btn-7 span:after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            background: rgba(251, 75, 2, 1);
            box-shadow:
                -7px -7px 20px 0px rgba(255, 255, 255, .9),
                -4px -4px 5px 0px rgba(255, 255, 255, .9),
                7px 7px 20px 0px rgba(0, 0, 0, .2),
                4px 4px 5px 0px rgba(0, 0, 0, .3);
            transition: all 0.3s ease;
        }

        .btn-7 span:before {
            width: 2px;
            height: 0%;
        }

        .btn-7 span:after {
            height: 2px;
            width: 0%;
        }

        .btn-7 span:hover:before {
            height: 100%;
        }

        .btn-7 span:hover:after {
            width: 100%;
        }

        /* 8 */
        .btn-8 {
            background-color: #f0ecfc;
            background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
            line-height: 42px;
            padding: 0;
            border: none;
        }

        .btn-8 span {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

        .btn-8:before,
        .btn-8:after {
            position: absolute;
            content: "";
            right: 0;
            bottom: 0;
            background: #c797eb;
            /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
            transition: all 0.3s ease;
        }

        .btn-8:before {
            height: 0%;
            width: 2px;
        }

        .btn-8:after {
            width: 0%;
            height: 2px;
        }

        .btn-8:hover:before {
            height: 100%;
        }

        .btn-8:hover:after {
            width: 100%;
        }

        .btn-8:hover {
            background: transparent;
        }

        .btn-8 span:hover {
            color: #c797eb;
        }

        .btn-8 span:before,
        .btn-8 span:after {
            position: absolute;
            content: "";
            left: 0;
            top: 0;
            background: #c797eb;
            /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
         inset -4px -4px 6px 0 rgba(255,255,255,.5),
        inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
            transition: all 0.3s ease;
        }

        .btn-8 span:before {
            width: 2px;
            height: 0%;
        }

        .btn-8 span:after {
            height: 2px;
            width: 0%;
        }

        .btn-8 span:hover:before {
            height: 100%;
        }

        .btn-8 span:hover:after {
            width: 100%;
        }


        /* 9 */
        .btn-9 {
            border: none;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .btn-9:after {
            position: absolute;
            content: " ";
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #1fd1f9;
            background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
            transition: all 0.3s ease;
        }

        .btn-9:hover {
            background: transparent;
            box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
                inset -4px -4px 6px 0 rgba(255, 255, 255, .5),
                inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
            color: #fff;
        }

        .btn-9:hover:after {
            -webkit-transform: scale(2) rotate(180deg);
            transform: scale(2) rotate(180deg);
            box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
                inset -4px -4px 6px 0 rgba(255, 255, 255, .5),
                inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
        }

        /* 10 */
        .btn-10 {
            background: rgb(22, 9, 240);
            background: linear-gradient(0deg, rgba(22, 9, 240, 1) 0%, rgba(49, 110, 244, 1) 100%);
            color: #fff;
            border: none;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .btn-10:after {
            position: absolute;
            content: " ";
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            transition: all 0.3s ease;
            -webkit-transform: scale(.1);
            transform: scale(.1);
        }

        .btn-10:hover {
            color: #fff;
            border: none;
            background: transparent;
        }

        .btn-10:hover:after {
            background: rgb(0, 3, 255);
            background: linear-gradient(0deg, rgba(2, 126, 251, 1) 0%, rgba(0, 3, 255, 1)100%);
            -webkit-transform: scale(1);
            transform: scale(1);
        }

        /* 11 */
        .btn-11 {
            border: none;
            background: rgb(251, 33, 117);
            background: linear-gradient(0deg, rgba(251, 33, 117, 1) 0%, rgba(234, 76, 137, 1) 100%);
            color: #fff;
            overflow: hidden;
        }

        .btn-11:hover {
            text-decoration: none;
            color: #fff;
        }

        .btn-11:before {
            position: absolute;
            content: '';
            display: inline-block;
            top: -180px;
            left: 0;
            width: 30px;
            height: 100%;
            background-color: #fff;
            animation: shiny-btn1 3s ease-in-out infinite;
        }

        .btn-11:hover {
            opacity: .7;
        }

        .btn-11:active {
            box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3),
                -4px -4px 6px 0 rgba(116, 125, 136, .2),
                inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
                inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
        }


        @-webkit-keyframes shiny-btn1 {
            0% {
                -webkit-transform: scale(0) rotate(45deg);
                opacity: 0;
            }

            80% {
                -webkit-transform: scale(0) rotate(45deg);
                opacity: 0.5;
            }

            81% {
                -webkit-transform: scale(4) rotate(45deg);
                opacity: 1;
            }

            100% {
                -webkit-transform: scale(50) rotate(45deg);
                opacity: 0;
            }
        }


        /* 12 */
        .btn-12 {
            position: relative;
            right: 20px;
            bottom: 20px;
            border: none;
            box-shadow: none;
            width: 130px;
            height: 40px;
            line-height: 42px;
            -webkit-perspective: 230px;
            perspective: 230px;
        }

        .btn-12 span {
            background: rgb(0, 172, 238);
            background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
            display: block;
            position: absolute;
            width: 130px;
            height: 40px;
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            border-radius: 5px;
            margin: 0;
            text-align: center;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

        .btn-12 span:nth-child(1) {
            box-shadow:
                -7px -7px 20px 0px #fff9,
                -4px -4px 5px 0px #fff9,
                7px 7px 20px 0px #0002,
                4px 4px 5px 0px #0001;
            -webkit-transform: rotateX(90deg);
            -moz-transform: rotateX(90deg);
            transform: rotateX(90deg);
            -webkit-transform-origin: 50% 50% -20px;
            -moz-transform-origin: 50% 50% -20px;
            transform-origin: 50% 50% -20px;
        }

        .btn-12 span:nth-child(2) {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
            -webkit-transform-origin: 50% 50% -20px;
            -moz-transform-origin: 50% 50% -20px;
            transform-origin: 50% 50% -20px;
        }

        .btn-12:hover span:nth-child(1) {
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }

        .btn-12:hover span:nth-child(2) {
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            color: transparent;
            -webkit-transform: rotateX(-90deg);
            -moz-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
        }


        /* 13 */
        .btn-13 {
            background-color: #89d8d3;
            background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
            border: none;
            z-index: 1;
        }

        .btn-13:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 0;
            bottom: 0;
            left: 0;
            z-index: -1;
            border-radius: 5px;
            background-color: #4dccc6;
            background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
            box-shadow:
                -7px -7px 20px 0px #fff9,
                -4px -4px 5px 0px #fff9,
                7px 7px 20px 0px #0002,
                4px 4px 5px 0px #0001;
            transition: all 0.3s ease;
        }

        .btn-13:hover {
            color: #fff;
        }

        .btn-13:hover:after {
            top: 0;
            height: 100%;
        }

        .btn-13:active {
            top: 2px;
        }


        /* 14 */
        .btn-14 {
            background: rgb(255, 151, 0);
            border: none;
            z-index: 1;
        }

        .btn-14:after {
            position: absolute;
            content: "";
            width: 100%;
            height: 0;
            top: 0;
            left: 0;
            z-index: -1;
            border-radius: 5px;
            background-color: #eaf818;
            background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            transition: all 0.3s ease;
        }

        .btn-14:hover {
            color: #000;
        }

        .btn-14:hover:after {
            top: auto;
            bottom: 0;
            height: 100%;
        }

        .btn-14:active {
            top: 2px;
        }

        /* 15 */
        .btn-15 {
            background: #b621fe;
            border: none;
            z-index: 1;
        }

        .btn-15:after {
            position: absolute;
            content: "";
            width: 0;
            height: 100%;
            top: 0;
            right: 0;
            z-index: -1;
            background-color: #663dff;
            border-radius: 5px;
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
                7px 7px 20px 0px rgba(0, 0, 0, .1),
                4px 4px 5px 0px rgba(0, 0, 0, .1);
            transition: all 0.3s ease;
        }

        .btn-15:hover {
            color: #fff;
        }

        .btn-15:hover:after {
            left: 0;
            width: 100%;
        }

        .btn-15:active {
            top: 2px;
        }

        /* 16 */
        .btn-16 {
            border: none;
            color: #000;
        }

        .btn-16:after {
            position: absolute;
            content: "";
            width: 0;
            height: 100%;
            top: 0;
            left: 0;
            direction: rtl;
            z-index: -1;
            box-shadow:
                -7px -7px 20px 0px #fff9,
                -4px -4px 5px 0px #fff9,
                7px 7px 20px 0px #0002,
                4px 4px 5px 0px #0001;
            transition: all 0.3s ease;
        }

        .btn-16:hover {
            color: #000;
        }

        .btn-16:hover:after {
            left: auto;
            right: 0;
            width: 100%;
        }

        .btn-16:active {
            top: 2px;
        }
    </style>
</head>

<body>
    <div class="frame">
        <button class="custom-btn btn-1">Read More</button>
        <button class="custom-btn btn-2">Read More</button>
        <button class="custom-btn btn-3"><span>Read More</span></button>
        <button class="custom-btn btn-4"><span>Read More</span></button>
        <button class="custom-btn btn-5"><span>Read More</span></button>
        <button class="custom-btn btn-6"><span>Read More</span></button>
        <button class="custom-btn btn-7"><span>Read More</span></button>
        <button class="custom-btn btn-8"><span>Read More</span></button>
        <button class="custom-btn btn-9">Read More</button>
        <button class="custom-btn btn-10">Read More</button>
        <button class="custom-btn btn-11">Read More<div class="dot"></div></button>
        <button class="custom-btn btn-12"><span>Click!</span><span>Read More</span></button>
        <button class="custom-btn btn-13">Read More</button>
        <button class="custom-btn btn-14">Read More</button>
        <button class="custom-btn btn-15">Read More</button>
        <button class="custom-btn btn-16">Read More</button>
</body>

</html>

无敌暴龙神~
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一定能用到的简单但实用的五种按钮样式（原生HTML
2401_83974142的博客
04-05 3567
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
HTML 按钮交互,20 个交互非常棒的按钮代码_html/css_WEB-ITnose
weixin_32892145的博客
06-29 2413
你能想象网页中没有按钮吗？我打赌你不会。在网页中，拥有按钮并不奇怪，这些看似很小、主要以矩形表现(如导航栏，版权信息)的东西，其实是网页 UI 中基础之一。它们不仅使链接看起来更有分量、吸引人和鲜明，而且他们还能提高跳转率和用户体验，使之更方便和直观。这些 CTA (Call-to-action：行为召唤)能帮你获得更多的潜在客户和促进业务的扩展。HOST按钮的开发需要注意它的形状、颜色、空间、排...
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）(1)
最新发布
2301_78145364的博客
05-16 1257
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html 好看的按钮,html-好看的CSS按钮
weixin_35897479的博客
06-23 308
该楼层疑似违规已被系统折叠隐藏此楼查看此楼CSS实现的几个非常漂亮的按钮--建站学.btn {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:progid:DXImageTransform.Mi...
html好看的单选按钮,基于jquery自定义的漂亮单选按钮RadioButton
weixin_39602005的博客
06-21 599
继续分享web前端自定义控件，今天所要分享的控件是单选按钮，希望对你有收获，有好的建议也希望能留言给我。代码如下：Html代码如下：Css代码如下：.radio{float:left;background:url(/img/Icon_BG.png);}.radio{width:14px;height:14px;background-position:0px -58px;cursor:pointer...
html好看的按钮css样式大全,css3教程_五种漂亮样式，CSS3动画按钮效果
weixin_35897853的博客
06-23 1445
CSS代码：.button01 {width: 200px;margin: 50px auto 20px auto;}.button01 a {display: block;height: 50px;width: 200px;/*TYPE*/color: white;font: 17px/50px Helvetica, Verdana, sans-serif;text-decoration: no...
8个时尚而简约的HTML5按钮
yazi1297的专栏
03-03 2853
转自:http://www.html5tricks.com/8-fasion-html5-buttons.html 按钮在网页交互中非常重要，本文主要分享一些外观时尚而又简约的HTML5按钮，有些按钮带有丰富的HTML5动画，有些按钮却有着清爽的外观，给人耳目一新的感觉，一起来看看吧。 1、基于Bootstrap的jQuery开关按钮组合 Bootstrap是一款由Twitt
HTML5货车交互订单按钮特效
06-24
HTML5货车交互订单按钮特效是一种创新的网页设计技术，它为用户提供了一种独特且吸引人的交互体验。在电子商务和购物网站中，此类特效能够提升用户的参与度，增加转化率，从而促进销售。这个特效的核心是将传统的...
动态交互UIKIT组件网页模板
01-22
动态交互UIKIT组件网页模板是一种现代化的网页设计资源，它结合了动态效果和用户界面工具包（UIKIT）的优势，为网页设计师提供了丰富的组件库，用于构建高度互动且视觉吸引人的网页。UIKIT是一个轻量级、模块化的...
html5 css3 动态气泡按钮实例演示
09-25
总之，这个HTML5 CSS3动态气泡按钮实例充分利用了CSS3的多重背景、渐变和过渡属性，展示了如何用纯CSS创建交互式和视觉吸引人的网页元素。这种方法不仅可以提高网页的性能，还能增强用户的交互体验，是现代网页设计...
动态创建按钮的JavaScript代码
11-26
在JavaScript中，动态创建元素是一项基础且实用的技能，它允许开发者在网页加载后或用户交互时根据需要创建新的HTML元素。在这个例子中，我们关注的是动态创建按钮。以下是关于这个话题的详细解释： 首先，我们需要...
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
HTML5 CSS3 gradient、box-shadow按钮特效代码大全.rar
07-10
HTML5 CSS3使用 gradient、box-shadow实现的按钮特效代码大全，带阴影的按钮，个个都很漂亮的CSS3按钮，你借助这些按钮效果，也可进一步学习下gradient、box-shadow的具体用法，对提高CSS3的编程水平有帮助。
纯CSS3冒泡动画按钮实现教程
weixin_34274029的博客
09-09 326
这款CSS3动画按钮非常的有创意，鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色，而是出现很酷的冒泡动画。这么惊艳的CSS3动画按钮，这篇文章主要将按钮实现的过程和代码分享给大家，希望能给在学习CSS3的同学带来实质性的帮助。可以下来看看在线演示效果： 在线演示        源码下载 接下来我们来讲解一下这款CSS3气泡动画的按钮实现过程，主要由HTML代码和CSS代码组成。 ...
H5 页面36种漂亮的CSS3网页按钮Button样式
weixin_43617604的博客
11-29 9802
h5相关特效source 点击查看 36种漂亮的CSS3网页按钮Button样式 效果图 代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style t...
html添加按钮语句,快速入门：添加按钮 (HTML)
weixin_35141284的博客
06-11 8136
快速入门：添加按钮 (HTML)03/04/2016本文内容[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]了解如何创建不同类型的 button控件。先决条件关于按钮和按钮事件若要在 HTML 中创建按钮，需要向你的 HTML 中添加一个 button 元素...
html 按钮动画,简单css3按钮动画的实现
weixin_39777242的博客
06-08 274
* {margin:0;padding:0;}body {font-size:14px;background:rgba(0,0,0,0.8);color:#555;}.container {width:1000px;margin:0 auto;}.container-div1 {margin-top:50px;background:#fff;height:500px;}.z-btn {margin...
【技术控】 如何做按钮小动画？HTML+CSS3
ak619的博客
02-25 1100
当在做网站前端的时候，如何利用HTML+CSS3 做按钮小动画，下面的案例大家可以试试，附源代码！ 按钮，宽：200，高：45，背景颜色：浅蓝 #b9ccd2 如下图：   当鼠标移动到按钮上，触发动画效果，形成深灰色圆圈向外扩展。如下图：   按钮的大小和颜色可以根据实际情况调整。 例如：把按钮改成，宽：300，高：80，背景颜色：浅绿 #9ef271   代码修改，如下
javascript动态生成按钮并绑定点击事件
热门推荐
海峰的博客
10-07 4万+
前一个多月公司的前端开发人员离职，公司一直在招前端，基本上每天都有几个来面试的人，就这个面试频率，也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础，但也很考基本功，基本上才3%左右的人做出来。当时我就在想以我的半吊子前端知识挑战一下这个题目。之前一直忙着把Android项目弄上线，修改bug，一直没时间。现在国庆节放假，发了一天时间把前端又看了下，然后理所当然的就写出来了，功
html好看动态图源代码
09-07
HTML是一种标记语言，它主要用于创建网页和网页应用程序。在HTML中，我们可以使用多种方式来呈现动态图形，使网页更加生动和具有吸引力。 ...所以，HTML的动态图像效果看起来非常好看且充满活力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值