22个炫酷css按钮

2023-10-09 425 阅读 0评论

图片

源码(cv即见效):


<!DOCTYPE html>
<html lang=
"zh">
 <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>
     body {
       display: flex;
       justify-content: start;
       align-items: center;
       flex-wrap: wrap;
     }

     button {
       margin-left:
20px;
       margin-bottom:
40px;
     }

     .btn
-1 {
       background-color:
#aa55ff;
       border-radius:
8px;
       border-style: none;
       box-sizing: border-box;
       color:
#FFFFFF;
       cursor: pointer;
       display: inline-block;
       font-size:
14px;
       font-weight:
500;
       height:
40px;
       line-height:
20px;
       list-style: none;
       outline: none;
       padding:
10px 16px;
       position: relative;
       text-align: center;
       text-decoration: none;
       transition: color
100ms;
       vertical-align: baseline;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-1:hover,
     .btn
-1:focus {
       background-color:
#aaaaff;
     }


     .btn
-2 {
       align-items: center;
       background-clip: padding-box;
       background-color:
#fa6400;
       border:
1px solid transparent;
       border-radius:
.25rem;
       box-shadow: rgba(
0, 0, 0, 0.02) 0 1px 3px 0;
       box-sizing: border-box;
       color:
#fff;
       cursor: pointer;
       display: inline-flex;
       font-family: system-ui, -apple-system, system-ui,
"Helvetica Neue", Helvetica, Arial, sans-serif;
       font-size:
16px;
       font-weight:
600;
       justify-content: center;
       line-height:
1.25;
       height:
40px;
       padding: calc(
.875rem - 1px) calc(1.5rem - 1px);
       position: relative;
       text-decoration: none;
       transition: all
250ms;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
       vertical-align: baseline;
       width: auto;
     }

     .btn
-2:hover,
     .btn
-2:focus {
       background-color:
#fb8332;
       box-shadow: rgba(
0, 0, 0, 0.1) 0 4px 12px;
     }

     .btn
-2:hover {
       transform: translateY(
-1px);
     }

     .btn
-2:active {
       background-color:
#c85000;
       box-shadow: rgba(
0, 0, 0, .06) 0 2px 4px;
       transform: translateY(
0);
     }


     .btn
-3 {
       padding:
6px 14px;
       font-family: -apple-system, BlinkMacSystemFont,
'Roboto', sans-serif;
       border-radius:
6px;
       border: none;
       color:
#fff;
       background: linear-gradient(
180deg, #4B91F7 0%, #367AF6 100%);
       background-origin: border-box;
       box-shadow:
0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-3:focus {
       box-shadow: inset
0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
       outline:
0;
     }


     .btn
-4 {
       background-color:
#fff;
       border:
1px solid #d5d9d9;
       border-radius:
8px;
       box-shadow: rgba(
213, 217, 217, .5) 0 2px 5px 0;
       box-sizing: border-box;
       color:
#0f1111;
       cursor: pointer;
       display: inline-block;
       font-family:
"Amazon Ember", sans-serif;
       font-size:
13px;
       line-height:
29px;
       padding:
0 10px 0 11px;
       position: relative;
       text-align: center;
       text-decoration: none;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
       vertical-align: middle;
       width:
100px;
     }

     .btn
-4:hover {
       background-color:
#f7fafa;
     }

     .btn
-4:focus {
       border-color:
#008296;
       box-shadow: rgba(
213, 217, 217, .5) 0 2px 5px 0;
       outline:
0;
     }


     .btn
-5 {
       background-image: linear-gradient(
#f7f8fa, #e7e9ec);
       border-color:
#adb1b8 #a2a6ac #8d9096;
       border-style: solid;
       border-width:
1px;
       border-radius:
3px;
       box-shadow: rgba(
255, 255, 255, .6) 0 1px 0 inset;
       box-sizing: border-box;
       color:
#0f1111;
       cursor: pointer;
       display: inline-block;
       font-family:
"Amazon Ember", Arial, sans-serif;
       font-size:
14px;
       height:
29px;
       font-size:
13px;
       outline:
0;
       overflow: hidden;
       padding:
0 11px;
       text-align: center;
       text-decoration: none;
       text-overflow: ellipsis;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
       white-space: nowrap;
     }

     .btn
-5:active {
       border-bottom-color:
#a2a6ac;
     }

     .btn
-5:active:hover {
       border-bottom-color:
#a2a6ac;
     }

     .btn
-5:hover {
       border-color:
#a2a6ac #979aa1 #82858a;
     }

     .btn
-5:focus {
       border-color:
#e77600;
       box-shadow: rgba(
228, 121, 17, .5) 0 0 3px 2px;
       outline:
0;
     }



     .btn
-6 {
       align-items: center;
       appearance: none;
       background-color:
#fff;
       border-radius:
24px;
       border-style: none;
       box-shadow: rgba(
0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0;
       box-sizing: border-box;
       color:
#3c4043;
       cursor: pointer;
       display: inline-flex;
       fill: currentcolor;
       font-family:
"Google Sans", Roboto, Arial, sans-serif;
       font-size:
14px;
       font-weight:
500;
       height:
40px;
       justify-content: center;
       letter-spacing:
.25px;
       line-height: normal;
       max-width:
100%;
       overflow: visible;
       padding:
2px 24px;
       position: relative;
       text-align: center;
       text-transform: none;
       transition: box-shadow
280ms cubic-bezier(.4, 0, .2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
       width: auto;
       will-change: transform, opacity;
       z-index:
0;
     }

     .btn
-6:hover {
       background:
#F6F9FE;
       color:
#174ea6;
     }

     .btn
-6:active {
       box-shadow:
0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
       outline: none;
     }

     .btn
-6:focus {
       outline: none;
       border:
2px solid #4285f4;
     }

     .btn
-6:not(:disabled) {
       box-shadow: rgba(
60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
     }

     .btn
-6:not(:disabled):hover {
       box-shadow: rgba(
60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
     }

     .btn
-6:not(:disabled):focus {
       box-shadow: rgba(
60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
     }

     .btn
-6:not(:disabled):active {
       box-shadow: rgba(
60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
     }

     .btn
-6:disabled {
       box-shadow: rgba(
60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
     }




     .btn
-7 {
       appearance: button;
       background-color:
#1899D6;
       border: solid transparent;
       border-radius:
16px;
       border-width:
0 0 4px;
       box-sizing: border-box;
       color:
#FFFFFF;
       cursor: pointer;        
/* display: inline-block; */
       font-family: din-round, sans-serif;
       font-size:
15px;
       font-weight:
700;
       letter-spacing:
.8px;
       line-height:
20px;
       outline: none;
       overflow: visible;
       padding:
5px 16px;
       text-align: center;
       text-transform: uppercase;
       touch-action: manipulation;
       transform: translateZ(
0);
       transition: filter
.2s;
       user-
select: none;
       -webkit-user-
select: none;
       vertical-align: middle;
       white-space: nowrap;
     }

     .btn
-7:after {
       background-clip: padding-box;
       background-color:
#1CB0F6;
       border: solid transparent;
       border-radius:
16px;
       border-width:
0 0 4px;
       bottom:
-4px;
       content:
"";
       left:
0;
       position: absolute;
       right:
0;
       top:
0;
       z-index:
-1;
     }

     .btn
-7:main,
     .btn
-7:focus {
       user-
select: auto;
     }

     .btn
-7:hover:not(:disabled) {
       filter: brightness(
1.1);
       -webkit-filter: brightness(
1.1);
     }

     .btn
-7:disabled {
       cursor: auto;
     }


     .btn
-8 {
       background-color:
#fff000;
       border-radius:
12px;
       color:
#000;
       cursor: pointer;
       font-weight: bold;
       padding:
10px 15px;
       text-align: center;
       transition:
200ms;
       box-sizing: border-box;
       border:
0;
       font-size:
16px;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-8:not(:disabled):hover,
     .btn
-8:not(:disabled):focus {
       outline:
0;
       background:
#f4e603;
       box-shadow:
0 0 0 2px rgba(0, 0, 0, .2), 0 3px 8px 0 rgba(0, 0, 0, .15);
     }

     .btn
-8:disabled {
       filter: saturate(
0.2) opacity(0.5);
       -webkit-filter: saturate(
0.2) opacity(0.5);
       cursor: not-allowed;
     }


     .btn
-9 {
       background-color:
#c2fbd7;
       border-radius:
100px;
       box-shadow: rgba(
44, 187, 99, .2) 0 -25px 18px -14px inset, rgba(44, 187, 99, .15) 0 1px 2px, rgba(44, 187, 99, .15) 0 2px 4px, rgba(44, 187, 99, .15) 0 4px 8px, rgba(44, 187, 99, .15) 0 8px 16px, rgba(44, 187, 99, .15) 0 16px 32px;
       color: green;
       cursor: pointer;
       display: inline-block;
       font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif;
       padding:
7px 20px;
       text-align: center;
       text-decoration: none;
       transition: all
250ms;
       border:
0;
       font-size:
16px;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-9:hover {
       box-shadow: rgba(
44, 187, 99, .35) 0 -25px 18px -14px inset, rgba(44, 187, 99, .25) 0 1px 2px, rgba(44, 187, 99, .25) 0 2px 4px, rgba(44, 187, 99, .25) 0 4px 8px, rgba(44, 187, 99, .25) 0 8px 16px, rgba(44, 187, 99, .25) 0 16px 32px;
       transform: scale(
1.05) rotate(-1deg);
     }


     .btn
-10 {
       background-color:
#cf245f;
       background-image: linear-gradient(to bottom right,
#ff557f, #ff557f, #aaaaff);
       border:
0;
       border-radius:
.25rem;
       box-sizing: border-box;
       color:
#fff;
       cursor: pointer;
       font-family: ui-sans-serif, system-ui, -apple-system, system-ui,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
       font-size:
16px;        /* 18px */
       font-weight:
600;
       line-height:
40px;        /* 28px */
       text-align: center;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-10:hover {
       box-shadow: none;
     }

     @media (min-width:
1024px) {
       .btn
-10 {
         font-size:
1.5rem;          /* 24px */
         
/* padding: 1rem 1.5rem; */
         line-height:
40px;          /* 32px */
       }
     }





     .btn
-11,
     .btn
-11:after {
       width:
150px;
       height:
46px;
       line-height:
48px;
       font-size:
20px;
       font-family:
'Bebas Neue', sans-serif;
       background: linear-gradient(
45deg, transparent 5%, #FF013C 5%);
       border:
0;
       color:
#fff;
       letter-spacing:
3px;
       box-shadow:
6px 0px 0px #00E6F6;
       outline: transparent;
       position: relative;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-11:after {
       --slice
-0: inset(50% 50% 50% 50%);
       --slice
-1: inset(80% -6px 0 0);
       --slice
-2: inset(50% -6px 30% 0);
       --slice
-3: inset(10% -6px 85% 0);
       --slice
-4: inset(40% -6px 43% 0);
       --slice
-5: inset(80% -6px 5% 0);

       content:
'ALTERNATE TEXT';
       display: block;
       position: absolute;
       top:
0;
       left:
0;
       right:
0;
       bottom:
0;
       background: linear-gradient(
45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
       text-shadow:
-3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
       clip-path:
var(--slice-0);
     }

     .btn
-11:hover:after {
       animation:
1s glitch;
       animation-timing-function: steps(
2, end);
     }

     @keyframes glitch {        
0% {
         clip-path:
var(--slice-1);
         transform: translate(
-20px, -10px);
       }        
10% {
         clip-path:
var(--slice-3);
         transform: translate(
10px, 10px);
       }        
20% {
         clip-path:
var(--slice-1);
         transform: translate(
-10px, 10px);
       }        
30% {
         clip-path:
var(--slice-3);
         transform: translate(
0px, 5px);
       }        
40% {
         clip-path:
var(--slice-2);
         transform: translate(
-5px, 0px);
       }        
50% {
         clip-path:
var(--slice-3);
         transform: translate(
5px, 0px);
       }        
60% {
         clip-path:
var(--slice-4);
         transform: translate(
5px, 10px);
       }        
70% {
         clip-path:
var(--slice-2);
         transform: translate(
-10px, 10px);
       }        
80% {
         clip-path:
var(--slice-5);
         transform: translate(
20px, -10px);
       }        
90% {
         clip-path:
var(--slice-1);
         transform: translate(
-10px, 0px);
       }        
100% {
         clip-path:
var(--slice-1);
         transform: translate(
0);
       }
     }

     @media (min-width:
768px) {

       .btn
-11,
       .btn
-11:after {
         width:
200px;
         height:
48px;
         line-height:
48px;
       }
     }



     .btn
-12 {
       appearance: button;
       background-color:
#000;
       background-image: none;
       border:
1px solid #000;
       border-radius:
4px;
       box-shadow:
#fff 4px 4px 0 0, #000 4px 4px 0 1px;
       box-sizing: border-box;
       color:
#fff;
       cursor: pointer;
       display: inline-block;
       font-family: ITCAvantGardeStd-Bk, Arial, sans-serif;
       font-size:
14px;
       font-weight:
400;
       line-height:
20px;        /* margin: 0 5px 10px 20px; */
       overflow: visible;
       padding:
12px 40px;
       text-align: center;
       text-transform: none;
       touch-action: manipulation;
       user-
select: none;
       -webkit-user-
select: none;
       vertical-align: middle;
       white-space: nowrap;
     }

     .btn
-12:focus {
       text-decoration: none;
     }

     .btn
-12:hover {
       text-decoration: none;
     }

     .btn
-12:active {
       box-shadow: rgba(
0, 0, 0, .125) 0 3px 5px inset;
       outline:
0;
     }

     .btn
-12:not([disabled]):active {
       box-shadow:
#fff 2px 2px 0 0, #000 2px 2px 0 1px;
       transform: translate(
2px, 2px);
     }

     @media (min-width:
768px) {
       .btn
-12 {
         padding:
12px 50px;
       }
     }



     .btn
-13 {
       align-items: center;
       appearance: none;
       border-radius:
4px;
       border-style: none;
       box-shadow: rgba(
0, 0, 0, .2) 0 3px 1px -2px, rgba(0, 0, 0, .14) 0 2px 2px 0, rgba(0, 0, 0, .12) 0 1px 5px 0;
       box-sizing: border-box;
       color:
#fff;
       cursor: pointer;
       display: inline-flex;
       font-family: Roboto, sans-serif;
       font-size:
.875rem;
       font-weight:
500;
       height:
36px;
       justify-content: center;
       letter-spacing:
.0892857em;
       line-height: normal;
       min-width:
64px;
       outline: none;
       overflow: visible;
       padding:
0 16px;
       position: relative;
       text-align: center;
       text-decoration: none;
       text-transform: uppercase;
       transition: box-shadow
280ms cubic-bezier(.4, 0, .2, 1);
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
       vertical-align: middle;
       will-change: transform, opacity;
     }

     .btn
-13:hover {
       box-shadow: rgba(
0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0 4px 5px 0, rgba(0, 0, 0, .12) 0 1px 10px 0;
     }

     .btn
-13:disabled {
       background-color: rgba(
0, 0, 0, .12);
       box-shadow: rgba(
0, 0, 0, .2) 0 0 0 0, rgba(0, 0, 0, .14) 0 0 0 0, rgba(0, 0, 0, .12) 0 0 0 0;
       color: rgba(
0, 0, 0, .37);
       cursor:
default;
       pointer-events: none;
     }

     .btn
-13:not(:disabled) {
       background-color:
#6200ee;
     }

     .btn
-13:focus {
       box-shadow: rgba(
0, 0, 0, .2) 0 2px 4px -1px, rgba(0, 0, 0, .14) 0 4px 5px 0, rgba(0, 0, 0, .12) 0 1px 10px 0;
     }

     .btn
-13:active {
       box-shadow: rgba(
0, 0, 0, .2) 0 5px 5px -3px, rgba(0, 0, 0, .14) 0 8px 10px 1px, rgba(0, 0, 0, .12) 0 3px 14px 2px;
       background:
#A46BF5;
     }




     .btn
-14 {
       background-color:
#0a6bff;
       border-radius:
4px;
       border:
0;
       box-shadow: rgba(
1, 60, 136, .5) 0 -1px 3px 0 inset, rgba(0, 44, 97, .1) 0 3px 6px 0;
       box-sizing: border-box;
       color:
#fff;
       cursor: pointer;
       display: inherit;
       font-family:
"Space Grotesk", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       font-size:
18px;
       font-weight:
700;
       line-height:
24px;
       min-height:
56px;
       min-width:
120px;
       padding:
16px 20px;
       position: relative;
       text-align: center;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
       vertical-align: baseline;
       transition: all
.2s cubic-bezier(.22, .61, .36, 1);
     }

     .btn
-14:hover {
       background-color:
#065dd8;
       transform: translateY(
-2px);
     }

     @media (min-width:
768px) {
       .btn
-14 {
         padding:
16px 44px;
         min-width:
150px;
       }
     }



     .btn
-15 {
       appearance: none;
       backface-visibility: hidden;
       background-color:
#27ae60;
       border-radius:
8px;
       border-style: none;
       box-shadow: rgba(
39, 174, 96, .15) 0 4px 9px;
       box-sizing: border-box;
       color:
#fff;
       cursor: pointer;
       display: inline-block;
       font-family: Inter, -apple-system, system-ui,
"Segoe UI", Helvetica, Arial, sans-serif;
       font-size:
16px;
       font-weight:
600;
       letter-spacing: normal;
       line-height:
1.5;
       outline: none;
       overflow: hidden;
       padding:
13px 20px;
       position: relative;
       text-align: center;
       text-decoration: none;
       transform: translate3d(
0, 0, 0);
       transition: all
.3s;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
       vertical-align: top;
       white-space: nowrap;
     }

     .btn
-15:hover {
       background-color:
#1e8449;
       opacity:
1;
       transform: translateY(
0);
       transition-duration:
.35s;
     }

     .btn
-15:active {
       transform: translateY(
2px);
       transition-duration:
.35s;
     }

     .btn
-15:hover {
       box-shadow: rgba(
39, 174, 96, .2) 0 6px 12px;
     }




     .btn
-16 {
       background-color:
#3DD1E7;
       border:
0 solid #E5E7EB;
       box-sizing: border-box;
       color:
#000000;
       display: flex;
       font-family: ui-sans-serif, system-ui, -apple-system, system-ui,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
       font-size:
1rem;
       font-weight:
700;
       justify-content: center;
       line-height:
1.75rem;
       padding:
.75rem 1.65rem;
       position: relative;
       text-align: center;
       text-decoration: none
#000000 solid;
       text-decoration-thickness: auto;
       width:
100%;
       max-width:
60px;
       position: relative;
       cursor: pointer;
       transform: rotate(
-2deg);
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-16:focus {
       outline:
0;
     }

     .btn
-16:after {
       content:
'';
       position: absolute;
       border:
1px solid #000000;
       bottom:
4px;
       left:
4px;
       width: calc(
100% - 1px);
       height: calc(
100% - 1px);
     }

     .btn
-16:hover:after {
       bottom:
2px;
       left:
2px;
     }

     @media (min-width:
768px) {
       .btn
-16 {
         padding:
.75rem 3rem;
         font-size:
1.25rem;
       }
     }






     .btn
-17 {
       font-family:
"Open Sans", sans-serif;
       font-size:
16px;
       letter-spacing:
2px;
       text-decoration: none;
       text-transform: uppercase;
       color:
#000;
       cursor: pointer;
       border:
3px solid;
       padding:
0.25em 0.5em;
       box-shadow:
1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
       position: relative;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-17:active {
       box-shadow:
0px 0px 0px 0px;
       top:
5px;
       left:
5px;
     }

     @media (min-width:
768px) {
       .btn
-17 {
         padding:
0.25em 0.75em;
       }
     }



     .btn
-18 {
       --b:
3px;        /* border thickness */
       --s:
.45em;        /* size of the corner */
       --color:
#373B44;

       padding: calc(
.5em + var(--s)) calc(.9em + var(--s));
       color:
var(--color);
       --_p:
var(--s);
       background:
         conic-gradient(
from 90deg at var(--b) var(--b), #0000 90deg, var(--color) 0) var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
       transition:
.3s linear, color 0s, background-color 0s;
       outline:
var(--b) solid #0000;
       outline-offset:
.6em;
       font-size:
16px;

       border:
0;

       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-18:hover,
     .btn
-18:focus-visible {
       --_p:
0px;
       outline-color:
var(--color);
       outline-offset:
.05em;
     }

     .btn
-18:active {
       background:
var(--color);
       color:
#fff;
     }



     .btn
-19 {
       background-color:
#fff;
       border:
0 solid #e2e8f0;
       border-radius:
1.5rem;
       box-sizing: border-box;
       color:
#0d172a;
       cursor: pointer;
       display: inline-block;
       font-family:
"Basier circle", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
       font-size:
1.1rem;
       font-weight:
600;
       line-height:
1;
       padding:
1rem 1.6rem;
       text-align: center;
       text-decoration: none
#0d172a solid;
       text-decoration-thickness: auto;
       transition: all
.1s cubic-bezier(.4, 0, .2, 1);
       box-shadow:
0px 1px 2px rgba(166, 175, 195, 0.25);
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-19:hover {
       background-color:
#1e293b;
       color:
#fff;
     }

     @media (min-width:
768px) {
       .btn
-19 {
         font-size:
1.125rem;
         padding:
1rem 2rem;
       }
     }



     .btn
-20 {
       --c:
#fff;
       
/* text color */
       background: linear-gradient(
90deg, #0000 33%, #fff5, #0000 67%) var(--_p, 100%)/300% no-repeat,
         
#004dff;
       
/* background color */
       color:
#0000;
       border: none;
       transform: perspective(
500px) rotateY(calc(20deg*var(--_i, -1)));
       text-shadow: calc(
var(--_i, -1)* 0.08em) -.01em 0 var(--c),
         calc(
var(--_i, -1)*-0.08em) .01em 2px #0004;
       outline-offset:
.1em;
       transition:
0.3s;
     }

     .btn
-20:hover,
     .btn
-20:focus-visible {
       --_p:
0%;
       --_i:
1;
     }

     .btn
-20:active {
       text-shadow: none;
       color:
var(--c);
       box-shadow: inset
0 0 9e9q #0005;
       transition:
0s;
     }

     .btn
-20 {
       font-weight: bold;
       font-size:
2rem;
       cursor: pointer;
       padding:
.1em .3em;
     }




     .btn
-21 {
       background-color:
#fbeee0;
       border:
2px solid #422800;
       border-radius:
30px;
       box-shadow:
#422800 4px 4px 0 0;
       color:
#422800;
       cursor: pointer;
       display: inline-block;
       font-weight:
600;
       font-size:
18px;
       padding:
0 18px;
       line-height:
50px;
       text-align: center;
       text-decoration: none;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-21:hover {
       background-color:
#fff;
     }

     .btn
-21:active {
       box-shadow:
#422800 2px 2px 0 0;
       transform: translate(
2px, 2px);
     }

     @media (min-width:
768px) {
       .btn
-21 {
         min-width:
120px;
         padding:
0 25px;
       }
     }



     .btn
-22 {
       padding:
0.6em 2em;
       border: none;
       outline: none;
       color: rgb(
255, 255, 255);
       background:
#111;
       cursor: pointer;
       position: relative;
       z-index:
0;
       border-radius:
10px;
       user-
select: none;
       -webkit-user-
select: none;
       touch-action: manipulation;
     }

     .btn
-22:before {
       content:
"";
       background: linear-gradient(
45deg,            #ff0000,
           
#ff7300,
           
#fffb00,
           
#48ff00,
           
#00ffd5,
           
#002bff,
           
#7a00ff,
           
#ff00c8,
           
#ff0000);
       position: absolute;
       top:
-2px;
       left:
-2px;
       background-size:
400%;
       z-index:
-1;
       filter: blur(
5px);
       -webkit-filter: blur(
5px);
       width: calc(
100% + 4px);
       height: calc(
100% + 4px);
       animation: glowing-button
-85 20s linear infinite;
       transition: opacity
0.3s ease-in-out;
       border-radius:
10px;
     }

     @keyframes glowing-button
-85 {        0% {
         background-position:
0 0;
       }        
50% {
         background-position:
400% 0;
       }        
100% {
         background-position:
0 0;
       }
     }

     .btn
-22:after {
       z-index:
-1;
       content:
"";
       position: absolute;
       width:
100%;
       height:
100%;
       background:
#222;
       left:
0;
       top:
0;
       border-radius:
10px;
     }
   </style>
 </head>
 <body>
   <button
class="btn-1">Button1</button>
   <button
class="btn-2">Button2</button>
   <button
class="btn-3">Button3</button>
   <button
class="btn-4">Button4</button>
   <button
class="btn-5">Button5</button>
   <button
class="btn-6">Button6</button>
   <button
class="btn-7">Button7</button>
   <button
class="btn-8">Button8</button>
   <button
class="btn-9">Button9</button>
   <button
class="btn-10">Button10</button>
   <button
class="btn-11">Button11</button>
   <button
class="btn-12">Button12</button>
   <button
class="btn-13">Button13</button>
   <button
class="btn-14">Button14</button>
   <button
class="btn-15">Button15</button>
   <button
class="btn-16">Button16</button>
   <button
class="btn-17">Button17</button>
   <button
class="btn-18">Button18</button>
   <button
class="btn-19">Button19</button>
   <button
class="btn-20">Button20</button>
   <button
class="btn-21">Button21</button>
   <button
class="btn-22">Button22</button>

 </body>
</html>


初高语学习资料库资料小程序小程序



发表评论

快捷回复: 表情:
aoman baiyan bishi bizui cahan ciya dabing daku deyi doge fadai fanu fendou ganga guzhang haixiu hanxiao zuohengheng zhuakuang zhouma zhemo zhayanjian zaijian yun youhengheng yiwen yinxian xu xieyanxiao xiaoku xiaojiujie xia wunai wozuimei weixiao weiqu tuosai tu touxiao tiaopi shui se saorao qiudale qinqin qiaoda piezui penxue nanguo liulei liuhan lenghan leiben kun kuaikule ku koubi kelian keai jingya jingxi jingkong jie huaixiao haqian aini OK qiang quantou shengli woshou gouyin baoquan aixin bangbangtang xiaoyanger xigua hexie pijiu lanqiu juhua hecai haobang caidao baojin chi dan kulou shuai shouqiang yangtuo youling
提交
评论列表 (有 0 条评论, 425人围观)

最近发表

热门文章

最新留言

热门推荐

标签列表