How to use HTML5+css3 to create 12 commonly used button switch styles (complete code attached)-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to use HTML5+css3 to create 12 commonly used button switch styles (complete code attached)

坏嘻嘻

Sep 28, 2018 am 10:07 AM

css3button

Nowadays, the development of front-end web pages pays more and more attention to the sense of design. These senses of design are more reflected in the details. Today I will introduce to you in detail how various switch buttons are made using HTML5 css3. I hope it can help. to everyone.

The principle of using HTML5 css3 to make button switches

Fill various colors according to the requirements of the design.
#The shape of the button switch requires detailed analysis of specific issues. For example, the round button switch needs to use the border-radius statement, and the square button switch can directly use div settings, etc.
The conversion of the cursor style when the mouse is hovering is also a reflection of the emphasis on design. Here we focus on the usage of cursor:

The cursor attribute specifies the cursor to be displayed. Type, this attribute defines the cursor shape used when the mouse pointer is placed within the bounds of an element. According to W3C standards, almost all browsers on the market are compatible with the cursor attribute, so don't worry about compatibility issues with browsers.

The usage of the cursor attribute is shown in the following table
##The 12 button switch styles shown in this article are: div button, default Button, link button, rounded button, input box button, color change button on hover, shadow button, appear button on hover, disabled button, arrow mark button, ripple button and press effect button.

Code for making button switches using HTML5 css3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>各式各样的按钮</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 600px;
            height: 400px;
            margin: 0 auto;
            /*background: pink;*/
            padding: 30px 50px;
        }
        /*div按钮*/
        .button5{
            width: 100px;
            height: 30px;
            float: left;
            /*position: absolute;*/
            text-align: center;
            padding-top: 10px;
            margin:0px 10px ;
            background: greenyellow;
            border: 1px solid plum;
            cursor: pointer;
            border-radius: 50%;
        }
        /*链接按钮*/
        .button2{
            background: gold;
            border: 1px solid greenyellow;
            text-decoration: none;
            display: inline-block;
            padding: 10px 22px;
            border-radius: 20px;
            /*cursor: pointer;靠近按钮的一只手*/
        }
        /*按钮*/
        .button3{
            background: pink;
            border: 1px solid blueviolet;
            padding: 10px 28px;
            cursor: pointer;
            color: yellow;
            border-radius: 40%;
        }
        /*输入框按钮*/
        .button4{
            background: cornflowerblue;
            border: 3px solid yellow;
            padding: 10px 20px;
            border-radius: 20%;
            outline-style: none;/*去除点击时外部框线*/
        }
        /*悬停变色按钮*/
        .button6{
            background: plum;
            color: greenyellow;
            border: 1px solid dodgerblue;
            transition-duration: 1s;/*过渡时间*/
            border-radius: 12px;
            padding: 13px 18px;
            margin-top: 20px;
            outline-style: none;/*去除点击时外部框线*/
        }
        .button6:hover{
            background: yellow;
            color: magenta;
            transition-duration: 1s;
        }
        /*阴影按钮*/
        .button7{
            /*display: inline-block;*/
            border: none;
            background: lime;
            padding: 13px 18px;
            margin-top: 20px;
            /*outline-style: none;!*去除点击时外部框线*!*/
            /*-webkit-transition-duration: 0.6s;*/
            transition-duration: 0.6s;
            /*设置按钮阴影*/
            box-shadow: 0 8px 16px 0 rgba(0,255,0,0.2),0 6px 20px 0 rgba(0,0,255,0.1);
        }
        /*悬停出现阴影按钮*/
        .button8{
            border: none;
            background: dodgerblue;
            padding: 13px 18px;
            margin-top: 20px;
            transition-duration: 0.6s;
        }
        .button8:hover{
            box-shadow: 0 12px 16px 0 rgba(0,255,0,0.24),0 17px 50px 0 rgba(0,0,255,0.19);
        }
        /*禁用按钮*/
        .button9{
            border: none;
            background: green;
            padding: 13px 18px;
            margin-top: 20px;
            opacity: 0.6;/*设置按钮的透明度*/
            cursor: not-allowed;/*设置按钮为禁用状态*/
        }
        /*箭头标记按钮*/
        .button10{
            display: inline-block;
            border: none;
            background: red;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 4px;
            width: 180px;
            font-size: 16px;/*可以通过字体控制button大小*/
            transition: all 0.5s;
            margin: 5px;
            cursor: pointer;
        }
        .button10 span{
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        .button10 span:after{
            content: &#39;»&#39;;
            color: white;
            position: absolute;
            opacity: 0;/*先设置透明度为0，即不可见*/
            right:-20px;/*新增箭头出来的方向*/
            transition: 0.5s;
        }
        .button10:hover span{
            padding-right: 15px;/*新增箭头与前面文字的距离*/
        }
        .button10:hover span:after{
            opacity: 1;/*设置透明度为1，即可见状态*/
            right: 0;
        }
        /*点击出现波纹效果按钮*/
        .button11{
            position: relative;/*必须添上这一句，否则波纹布满整个页面*/
            background: dodgerblue;
            border: none;
            color: white;
            width: 180px;
            font-size: 16px;/*可以通过字体控制button大小*/
            padding: 20px;
            border-radius: 12px;
            transition-duration: 0.4s;
            overflow: hidden;
            outline-style: none;/*去除点击时外部框线*/
        }
        .button11:after{
            content:"";
            background: aquamarine;
            opacity: 0;
            display: block;
            position: absolute;
            padding-top: 300%;
            padding-left: 350%;
            margin-left: -20px!important;
            margin-top: -120%;
            transition: all 0.5s;
        }
        .button11:active:after{
            padding: 0;
            margin: 0;
            opacity: 1;
            transition: 0.1s;
        }
        /*点击出现按压效果*/
        .button12{
            outline-style: none;/*去除点击时外部框线*/
            padding: 20px;
            color: white;
            background: yellow;
            border: none;
            border-radius: 12px;
            box-shadow: 0px 9px 0px rgba(144,144,144,1),0px 9px 25px rgba(0,0,0,.7);
        }
        .button12:hover{
            background: gold;
        }
        .button12:active{
            background: gold;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
            transition-duration: 0s;/*过渡效果持续时间*/
        }
    </style>
</head>
<body>
<div>
    <div>5div按钮</div>
    <p style="clear: both"><br></p>
    <button>1默认按钮</button>
    <a href="#">2链接按钮</a>
    <button>3按钮</button>
    <input type="button" value="4输入框按钮">
    <button>6悬停变色按钮</button>
    <button>7阴影按钮</button>
    <button>8悬停出现阴影</button>
    <button>9禁用按钮</button>
    <button style="vertical-align: middle"><span>10箭头标记按钮</span></button>
    <button>11波纹click</button>
    <button>12按压效果click</button>
</div>
</body>
</html>

Button switch style is as shown in the figure Shown

How to use HTML5+css3 to create 12 commonly used button switch styles (complete code attached)

The above is the detailed content of How to use HTML5+css3 to create 12 commonly used button switch styles (complete code attached). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Fixed Headers, On-Page Links, and Overlapping Content, Oh My!Apr 22, 2025 am 09:16 AM

Let's take a basic on-page link:

Decaying SitesApr 22, 2025 am 09:12 AM

Websites have a tendency to decay all by themselves. Link rot, they call it. Unpaid domain name registrations. Companies that have gone out of business. Site

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

See all articles