一、文字水波纹特效
完整html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>海拥 | 水波文本动画</title> <style> @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; background: #000; min-height: 100vh; align-items: center; justify-content: center; } .content { position: relative; } .content h2 { color: #fff; font-size: 8em; position: absolute; transform: translate(-50%, -50%); } .content h2:nth-child(1) { color: transparent; -webkit-text-stroke: 2px #03a9f4; } .content h2:nth-child(2) { color: #03a9f4; animation: animate 4s ease-in-out infinite; } @keyframes animate { 0%, 100% { clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); } 50% { clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); } } .page-footer { position: fixed; right: 35px; bottom: 20px; display: flex; align-items: center; padding: 5px; color: black; background: rgba(255, 255, 255, 0.65); } .page-footer a { display: flex; margin-left: 4px; } .touxiang { bottom: 0px; width: 30px; height: 30px; } </style> <script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?a9430a37066911650e26adadcc42798a"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </head> <body> <section> <div class="content"> <h2>Amoureux555</h2> <h2>Amoureux555</h2> </div> </section> </body> </html>
二、按钮按动特效
简单的几行css就能实现的按钮按动特效
<!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> .box19 { width: 100px; height: 30px; background: #89d444; line-height: 30px; color: #fff; user-select: none; box-shadow: 0px 8px 0 0 #479a48, 0 10px 5px 0 rgba(0, 0, 0, .5); border-radius: 5px; transform: translateY(-8px); text-align: center; } .box19:active { transform: translateY(0); box-shadow: 0 0 } </style> </head> <body> <div class="box19">点击</div> </body> </html>
三、网页特效live2d看板娘
今天无意中看到一个特效,网页特效live2d看板娘,感觉效果还挺不错的。不过,这个特效适合那些总喜欢花里胡哨的朋友们,至于喜欢简洁且不想该站点那么卡顿的朋友们可以放弃了。
其实网站实现网页特效live2d看板娘的操作方法也很简单,只需简单的几行代码便可轻松搞定。该人物会跟随你的鼠标动,给网站添加了不少特色,超级可爱!
直接在项目中引入文件即可,例如vue2项目在index.html中粘贴代码即可
1、默认无参数显示在右下角
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script> <script type="text/javascript"> L2Dwidget .on('*', (name) => { console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000') }) .init({ dialog: { // 开启对话框 enable: true, script: { // 每空闲 10 秒钟,显示一条一言 'every idle 10s': '$hitokoto$', // 当触摸到角色身体 'tap body': '哎呀!别碰我!', // 当触摸到角色头部 'tap face': '人家已经不是小孩子了!' } } }); </script>
2、带参数显示在左下角(需求不同可以修改)
<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script> <script type="text/javascript"> L2Dwidget .on('*', (name) => { console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000') }) .init({ display: { // 居左 "position": "left", // 宽度 "width": 200, // 高度 "height": 400, // 距左右 "hOffset": 35, // 距下 "vOffset": -20 }, mobile: { // 移动端,false为关闭 "show": true, "scale": 0.5 }, dialog: { // 开启对话框,false为关闭 enable: true, script: { // 每空闲 10 秒钟,显示一条一言 'every idle 10s': '$hitokoto$', // 当触摸到角色身体 'tap body': '哎呀!别碰我!', // 当触摸到角色头部 'tap face': '人家已经不是小孩子了!' } } }); </script>
以该网站为例实现的效果
四、粒子特效
非常炫酷的粒子特效
因为之前已经发布过一篇文章专门介绍粒子特效的,在这里就不详细介绍了
传送门:vue2 粒子特效
五、18款好看的纯css 标题栏
<!-- * @name: name * @description: Description * @lastEditors: Francis * @date: Do not edit * @lastEditTime: Do not edit * @filePath: Do not edit --> <template> <div class="titleContent"> <!-- <div class="title1" data-color="red"></div> --> <div :class="'title title' + value" :data-text="'标题-ranAdmin' + value" v-for="value in 18" :key="value" > 标题-ranAdmin </div> </div> </template> <script setup> </script> <style lang="scss"> .titleContent { > div { margin: 15px; } } .title { height: 32px; font-weight: 600; line-height: 32px; margin-left: 5px; padding-left: 5px; position: relative; color: #000; z-index: 0; } .title1 { padding-left: 15px; &:after { content: " "; width: 4px; height: 20px; background: #12a3f5; position: absolute; left: 0; top: 6px; border-radius: 2px; } } .title2 { padding-left: 15px; &:after { content: " "; width: 8px; height: 8px; border-radius: 50%; background: #12a3f5; position: absolute; left: 0; top: 12px; } } .title3 { &:after { content: " "; position: absolute; bottom: 0; left: 0; position: absolute; height: 2px; width: 100%; background: linear-gradient(to right, #01dfe3, rgba(255, 255, 255, 0)); } } .title4 { &:after { content: attr(data-text); position: absolute; display: inline-block; bottom: -8px; left: 5px; opacity: 0.2; z-index: 0; text-align: right; transform: rotateY(30deg); transform: scaleY(30deg); } } .title5 { color: #10faf8; padding-left: 80px; line-height: 22px; position: relative; border-bottom: 2px solid linear-gradient(to right, #01dfe3, rgba(255, 255, 255, 0)); &:after { content: ""; position: absolute; bottom: 0; top: 0; left: 18px; width: 50px; height: 18px; transform: skewX(35deg); background: linear-gradient(to right, #2d83fa, #10faf8); } &:before { content: "|||"; display: inline-block; font-weight: 900; color: #fff; line-height: 30px; font-size: 18px; position: absolute; position: absolute; top: -8px; left: 0; color: #2d83fa; transform: skewX(35deg); } } .title6 { color: #c6d039; padding-left: 80px; line-height: 22px; position: relative; border-bottom: 2px solid linear-gradient(to right, #01dfe3, rgba(255, 255, 255, 0)); &:after { content: ""; position: absolute; bottom: 0; top: 0; left: 18px; width: 50px; height: 18px; transform: skewX(35deg); background: linear-gradient(to right, #4bf15a, #c6d039); } &:before { content: "|||"; display: inline-block; font-weight: 900; color: #fff; line-height: 30px; font-size: 18px; position: absolute; position: absolute; top: -8px; left: 0; color: #4bf15a; transform: skewX(35deg); } } .title7 { &:after { content: ""; position: absolute; bottom: 0; top: 0; left: 0; width: 180px; height: 100%; opacity: 0.3; background: linear-gradient(to right, #4bf15a, #4bf15900); } &:before { content: " "; position: absolute; bottom: 0; left: 0; position: absolute; height: 2px; width: 100%; background: linear-gradient(to right, #4bf15a, rgba(255, 255, 255, 0)); } } .title8 { border-radius: 16px; border: 1px solid #e8e9fb; box-shadow: 0 0 10px #e8e9fb; text-align: center; width: 160px; color: #12a3f5; &:before { content: ""; width: 300%; height: 2px; background: #e8e9fb; position: absolute; top: 15px; left: 100%; background: linear-gradient(to right, #e8e9fb, rgba(255, 255, 255, 0)); } } .title9 { background: #ecf8ff; border-top-left-radius: 5px; padding-left: 20px; &:before { content: ""; border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: 4px; height: 100%; background: #50bfff; position: absolute; top: 0; left: 0; } } .title10 { background: #fff6f7; border-top-left-radius: 5px; padding-left: 20px; &:before { content: ""; border-top-left-radius: 5px; border-bottom-left-radius: 5px; width: 4px; height: 100%; background: #fe6c6f; position: absolute; top: 0; left: 0; } } .title11 { display: inline-block; position: relative; width: 150px; height: 32px; line-height: 32px; padding-left: 15px; background: #50bfff; left: -8px; color: #fff; &:before { content: ""; position: absolute; height: 0; width: 0; border-bottom: 8px solid #4396c5; border-left: 8px solid transparent; top: -8px; left: 0; } &:after { content: ""; position: absolute; height: 0; width: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 8px solid #50bfff; right: -8px; } } .title12 { position: relative; width: 160px; padding-left: 10px; // top: 15px; // padding: 8px 10px; background: #00b3ed; box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5); color: #fff; // height: 40px; &:before { position: absolute; content: ""; display: block; width: 7px; height: 100%; padding: 0 0 7px; top: 0; left: -7px; background: inherit; border-radius: 5px 0 0 5px; } &:before { position: absolute; content: ""; display: block; width: 5px; height: 5px; background: rgba(0, 0, 0, 0.35); bottom: -5px; left: -5px; border-radius: 5px 0 0 5px; } } .title13 { border-left: 2px solid #fe6c6f; &:after { content: " "; position: absolute; bottom: 0; left: 0; position: absolute; height: 2px; width: 60%; background: linear-gradient(to right, #fe6c6f, rgba(255, 255, 255, 0)); } &::before { content: " "; position: absolute; top: 0; left: 0; position: absolute; height: 2px; width: 30%; background: linear-gradient(to right, #fe6c6f, rgba(255, 255, 255, 0)); } } .title14 { border-left: 2px solid #01dfe3; &:after { content: " "; position: absolute; bottom: 0; left: 0; position: absolute; height: 2px; width: 60%; background: linear-gradient(to right, #01dfe3, rgba(255, 255, 255, 0)); } &::before { content: " "; position: absolute; top: 0; left: 0; position: absolute; height: 2px; width: 30%; background: linear-gradient(to right, #01dfe3, rgba(255, 255, 255, 0)); } } .title15 { color: #fff; padding-left: 50px; background: linear-gradient(-210deg, transparent 1.5em, #01dfe3 0); &::before { content: ""; display: block; width: 1.73em; height: 3em; position: absolute; background: linear-gradient(-60deg, #577b98 50%, transparent 0); left: -3px; top: 0; border-bottom-left-radius: inherit; transform: translateY(-0.5em) rotate(30deg); transform-origin: bottom right; box-shadow: 0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15); } } .title16 { color: #fff; padding-left: 50px; background: linear-gradient(-210deg, transparent 1.5em, #fe6c6f 0); &::before { content: ""; display: block; width: 1.73em; height: 3em; position: absolute; background: linear-gradient(-60deg, #f18384 50%, transparent 0); left: -3px; top: 0; border-bottom-left-radius: inherit; transform: translateY(-0.5em) rotate(30deg); transform-origin: bottom right; box-shadow: 0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15); } } .title17 { &:after { content: " "; position: absolute; bottom: 0; left: 0; position: absolute; height: 100%; width: 100%; animation: animation3 1s linear infinite; background: linear-gradient(135deg, #01dfe3 0.25em, transparent 0.25em) -0.5em 0, linear-gradient(225deg, #01dfe3 0.25em, transparent 0.25em) -0.5em 0, linear-gradient( 315deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em ) 0 0, linear-gradient( 45deg, rgba(238, 161, 99, 0.25) 0.25em, transparent 0.25em ) 0 0; background-size: 0.75em 0.75em; opacity: 0.3; } } .title18 { &:after { content: " "; position: absolute; bottom: 0; left: 0; position: absolute; height: 100%; width: 100%; opacity: 0.3; animation: animation2 1s linear infinite; background: repeating-linear-gradient( 45deg, #01dfe3 0, #01dfe3 0.25em, transparent 0.25em, transparent 0.5em ); background-size: 0.75em 0.75em; } } </style>
六、92款超级漂亮的css按钮样式 复制即用
<ul> <li> <div class="button-wrapper" data-tippy-content="Click to copy button 1"> <button class="button-1" role="button">Button 1</button> </div> <style> .button-1 { background-color: #EA4C89; border-radius: 8px; border-style: none; box-sizing: border-box; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; height: 40px; line-height: 20px; list-style: none; margin: 0; 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; } .button-1:hover, .button-1:focus { background-color: #F082AC; } </style> <span class="credits"> by Dribbble </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 2"> <button class="button-2" role="button">Button 2</button> </div> <style> .button-2 { background-color: rgba(51, 51, 51, 0.05); border-radius: 8px; border-width: 0; color: #333333; cursor: pointer; display: inline-block; font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; list-style: none; margin: 0; padding: 10px 12px; text-align: center; transition: all 200ms; vertical-align: baseline; white-space: nowrap; user-select: none; -webkit-user-select: none; touch-action: manipulation; } </style> <span class="credits"> by Dribbble </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 3"> <button class="button-3" role="button">Button 3</button> </div> <style> .button-3 { appearance: none; background-color: #2ea44f; border: 1px solid rgba(27, 31, 35, .15); border-radius: 6px; box-shadow: rgba(27, 31, 35, .1) 0 1px 0; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; font-size: 14px; font-weight: 600; line-height: 20px; padding: 6px 16px; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; white-space: nowrap; } .button-3:focus:not(:focus-visible):not(.focus-visible) { box-shadow: none; outline: none; } .button-3:hover { background-color: #2c974b; } .button-3:focus { box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px; outline: none; } .button-3:disabled { background-color: #94d3a2; border-color: rgba(27, 31, 35, .1); color: rgba(255, 255, 255, .8); cursor: default; } .button-3:active { background-color: #298e46; box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset; } </style> <span class="credits"> by Github </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 4"> <button class="button-4" role="button">Button 4</button> </div> <style> .button-4 { appearance: none; background-color: #FAFBFC; border: 1px solid rgba(27, 31, 35, 0.15); border-radius: 6px; box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset; box-sizing: border-box; color: #24292E; cursor: pointer; display: inline-block; font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 14px; font-weight: 500; line-height: 20px; list-style: none; padding: 6px 16px; position: relative; transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; white-space: nowrap; word-wrap: break-word; } .button-4:hover { background-color: #F3F4F6; text-decoration: none; transition-duration: 0.1s; } .button-4:disabled { background-color: #FAFBFC; border-color: rgba(27, 31, 35, 0.15); color: #959DA5; cursor: default; } .button-4:active { background-color: #EDEFF2; box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset; transition: none 0s; } .button-4:focus { outline: 1px transparent; } .button-4:before { display: none; } .button-4:-webkit-details-marker { display: none; } </style> <span class="credits"> by Github </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 5"> <button class="button-5" role="button">Button 5</button> </div> <style> .button-5 { 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; margin: 0; min-height: 3rem; 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; } .button-5:hover, .button-5:focus { background-color: #fb8332; box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px; } .button-5:hover { transform: translateY(-1px); } .button-5:active { background-color: #c85000; box-shadow: rgba(0, 0, 0, .06) 0 2px 4px; transform: translateY(0); } </style> <span class="credits"> by Sketch </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 6"> <button class="button-6" role="button">Button 6</button> </div> <style> .button-6 { align-items: center; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: .25rem; box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0; box-sizing: border-box; color: rgba(0, 0, 0, 0.85); 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; margin: 0; min-height: 3rem; 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; } .button-6:hover, .button-6:focus { border-color: rgba(0, 0, 0, 0.15); box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px; color: rgba(0, 0, 0, 0.65); } .button-6:hover { transform: translateY(-1px); } .button-6:active { background-color: #F0F0F1; border-color: rgba(0, 0, 0, 0.15); box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px; color: rgba(0, 0, 0, 0.65); transform: translateY(0); } </style> <span class="credits"> by Sketch </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 7"> <button class="button-7" role="button">Button 7</button> </div> <style> .button-7 { background-color: #0095ff; border: 1px solid transparent; border-radius: 3px; box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif; font-size: 13px; font-weight: 400; line-height: 1.15385; margin: 0; outline: none; padding: 8px .8em; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: baseline; white-space: nowrap; } .button-7:hover, .button-7:focus { background-color: #07c; } .button-7:focus { box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); } .button-7:active { background-color: #0064bd; box-shadow: none; } </style> <span class="credits"> by Stackoverflow </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 8"> <button class="button-8" role="button">Button 8</button> </div> <style> .button-8 { background-color: #e1ecf4; border-radius: 3px; border: 1px solid #7aa7c7; box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset; box-sizing: border-box; color: #39739d; cursor: pointer; display: inline-block; font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif; font-size: 13px; font-weight: 400; line-height: 1.15385; margin: 0; outline: none; padding: 8px .8em; position: relative; text-align: center; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: baseline; white-space: nowrap; } .button-8:hover, .button-8:focus { background-color: #b3d3ea; color: #2c5777; } .button-8:focus { box-shadow: 0 0 0 4px rgba(0, 149, 255, .15); } .button-8:active { background-color: #a0c7e4; box-shadow: none; color: #2c5777; } </style> <span class="credits"> by Stackoverflow </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 9"> <button class="button-9" role="button">Button 9</button> </div> <style> .button-9 { appearance: button; backface-visibility: hidden; background-color: #405cf5; border-radius: 6px; border-width: 0; box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0; box-sizing: border-box; color: #fff; cursor: pointer; font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif; font-size: 100%; height: 44px; line-height: 1.15; margin: 12px 0 0; outline: none; overflow: hidden; padding: 0 25px; position: relative; text-align: center; text-transform: none; transform: translateZ(0); transition: all .2s,box-shadow .08s ease-in; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; } .button-9:disabled { cursor: default; } .button-9:focus { box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px; } </style> <span class="credits"> by Stripe </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 10"> <button class="button-10" role="button">Button 10</button> </div> <style> .button-10 { display: flex; flex-direction: column; align-items: center; 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; } .button-10: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; } </style> <span class="credits"> by macOS Big Sur </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 11"> <button class="button-11" role="button">Button 11</button> </div> <style> .button-11 { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; border-radius: 6px; color: #3D3D3D; background: #fff; border: none; box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1); user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-11:focus { box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5); outline: 0; } </style> <span class="credits"> by macOS Big Sur </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 12"> <button class="button-12" role="button">Button 12</button> </div> <style> .button-12 { display: flex; flex-direction: column; align-items: center; padding: 6px 14px; font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; border-radius: 6px; border: none; background: #6E6D70; box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12); color: #DFDEDF; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-12:focus { box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5); outline: 0; } </style> <span class="credits"> by macOS Big Sur </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 13"> <button class="button-13" role="button">Button 13</button> </div> <style> .button-13 { 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; } .button-13:hover { background-color: #f7fafa; } .button-13:focus { border-color: #008296; box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0; outline: 0; } </style> <span class="credits"> by Amazon </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 14"> <button class="button-14" role="button">Button 14</button> </div> <style> .button-14 { 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; } .button-14:active { border-bottom-color: #a2a6ac; } .button-14:active:hover { border-bottom-color: #a2a6ac; } .button-14:hover { border-color: #a2a6ac #979aa1 #82858a; } .button-14:focus { border-color: #e77600; box-shadow: rgba(228, 121, 17, .5) 0 0 3px 2px; outline: 0; } </style> <span class="credits"> by Amazon </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 15"> <button class="button-15" role="button">Button 15</button> </div> <style> .button-15 { background-image: linear-gradient(#42A1EC, #0070C9); border: 1px solid #0077CC; border-radius: 4px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; direction: ltr; display: block; font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 17px; font-weight: 400; letter-spacing: -.022em; line-height: 1.47059; min-width: 30px; overflow: visible; padding: 4px 15px; text-align: center; vertical-align: baseline; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; } .button-15:disabled { cursor: default; opacity: .3; } .button-15:hover { background-image: linear-gradient(#51A9EE, #147BCD); border-color: #1482D0; text-decoration: none; } .button-15:active { background-image: linear-gradient(#3D94D9, #0067B9); border-color: #006DBC; outline: none; } .button-15:focus { box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px; outline: none; } </style> <span class="credits"> by Apple </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 16"> <button class="button-16" role="button">Button 16</button> </div> <style> .button-16 { background-color: #f8f9fa; border: 1px solid #f8f9fa; border-radius: 4px; color: #3c4043; cursor: pointer; font-family: arial,sans-serif; font-size: 14px; height: 36px; line-height: 27px; min-width: 54px; padding: 0 16px; text-align: center; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: pre; } .button-16:hover { border-color: #dadce0; box-shadow: rgba(0, 0, 0, .1) 0 1px 1px; color: #202124; } .button-16:focus { border-color: #4285f4; outline: none; } </style> <span class="credits"> by Google </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 17"> <button class="button-17" role="button">Button 17</button> </div> <style> .button-17 { 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: 48px; 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; } .button-17:hover { background: #F6F9FE; color: #174ea6; } .button-17:active { box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%); outline: none; } .button-17:focus { outline: none; border: 2px solid #4285f4; } .button-17:not(:disabled) { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):hover { box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px; } .button-17:not(:disabled):focus { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } .button-17:not(:disabled):active { box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px; } .button-17:disabled { box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px; } </style> <span class="credits"> by Google </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 18"> <button class="button-18" role="button">Button 18</button> </div> <style> .button-18 { align-items: center; background-color: #0A66C2; border: 0; border-radius: 100px; box-sizing: border-box; color: #ffffff; cursor: pointer; display: inline-flex; font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; justify-content: center; line-height: 20px; max-width: 480px; min-height: 40px; min-width: 0px; overflow: hidden; padding: 0px; padding-left: 20px; padding-right: 20px; text-align: center; touch-action: manipulation; transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s; user-select: none; -webkit-user-select: none; vertical-align: middle; } .button-18:hover, .button-18:focus { background-color: #16437E; color: #ffffff; } .button-18:active { background: #09223b; color: rgb(255, 255, 255, .7); } .button-18:disabled { cursor: not-allowed; background: rgba(0, 0, 0, .08); color: rgba(0, 0, 0, .3); } </style> <span class="credits"> by Linkedin </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 19"> <button class="button-19" role="button">Button 19</button> </div> <style> .button-19 { 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; margin: 0; outline: none; overflow: visible; padding: 13px 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; width: 100%; } .button-19: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; } .button-19:main, .button-19:focus { user-select: auto; } .button-19:hover:not(:disabled) { filter: brightness(1.1); -webkit-filter: brightness(1.1); } .button-19:disabled { cursor: auto; } </style> <span class="credits"> by Duolingo </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 20"> <button class="button-20" role="button">Button 20</button> </div> <style> .button-20 { appearance: button; background-color: #4D4AE8; background-image: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0)); border: 1px solid #4D4AE8; border-radius: 1rem; box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset,rgba(46, 54, 80, 0.075) 0 1px 1px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: Inter,sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; margin: 0; padding: .5rem 1rem; text-align: center; text-transform: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; } .button-20:focus:not(:focus-visible), .button-20:focus { outline: 0; } .button-20:hover { background-color: #3733E5; border-color: #3733E5; } .button-20:focus { background-color: #413FC5; border-color: #3E3BBA; box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset, rgba(46, 54, 80, 0.075) 0 1px 1px, rgba(104, 101, 235, 0.5) 0 0 0 .2rem; } .button-20:active { background-color: #3E3BBA; background-image: none; border-color: #3A38AE; box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset; } .button-20:active:focus { box-shadow: rgba(46, 54, 80, 0.125) 0 3px 5px inset, rgba(104, 101, 235, 0.5) 0 0 0 .2rem; } .button-20:disabled { background-image: none; box-shadow: none; opacity: .65; pointer-events: none; } </style> <span class="credits"> by ui.glass </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 21"> <button class="button-21" role="button">Button 21</button> </div> <style> .button-21 { align-items: center; appearance: none; background-color: #3EB2FD; background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%); background-size: calc(100% + 20px) calc(100% + 20px); border-radius: 100px; border-width: 0; box-shadow: none; box-sizing: border-box; color: #FFFFFF; cursor: pointer; display: inline-flex; font-family: CircularStd,sans-serif; font-size: 1rem; height: auto; justify-content: center; line-height: 1.5; padding: 6px 20px; position: relative; text-align: center; text-decoration: none; transition: background-color .2s,background-position .2s; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: top; white-space: nowrap; } .button-21:active, .button-21:focus { outline: none; } .button-21:hover { background-position: -20px -20px; } .button-21:focus:not(:active) { box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em; } </style> <span class="credits"> by Stackbit </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 22"> <button class="button-22" role="button">Button 22</button> </div> <style> .button-22 { align-items: center; appearance: button; background-color: #0276FF; border-radius: 8px; border-style: none; box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset; box-sizing: border-box; color: #fff; cursor: pointer; display: flex; flex-direction: row; flex-shrink: 0; font-family: "RM Neue",sans-serif; font-size: 100%; line-height: 1.15; margin: 0; padding: 10px 21px; text-align: center; text-transform: none; transition: color .13s ease-in-out,background .13s ease-in-out,opacity .13s ease-in-out,box-shadow .13s ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-22:active { background-color: #006AE8; } .button-22:hover { background-color: #1C84FF; } </style> <span class="credits"> by Noor </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 23"> <button class="button-23" role="button">Button 23</button> </div> <style> .button-23 { background-color: #FFFFFF; border: 1px solid #222222; border-radius: 8px; box-sizing: border-box; color: #222222; cursor: pointer; display: inline-block; font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; font-size: 16px; font-weight: 600; line-height: 20px; margin: 0; outline: none; padding: 13px 23px; position: relative; text-align: center; text-decoration: none; touch-action: manipulation; transition: box-shadow .2s,-ms-transform .1s,-webkit-transform .1s,transform .1s; user-select: none; -webkit-user-select: none; width: auto; } .button-23:focus-visible { box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px; transition: box-shadow .2s; } .button-23:active { background-color: #F7F7F7; border-color: #000000; transform: scale(.96); } .button-23:disabled { border-color: #DDDDDD; color: #DDDDDD; cursor: not-allowed; opacity: 1; } </style> <span class="credits"> by Airbnb </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 24"> <button class="button-24" role="button">Button 24</button> </div> <style> .button-24 { background: #FF4742; border: 1px solid #FF4742; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: nunito,roboto,proxima-nova,"proxima nova",sans-serif; font-size: 16px; font-weight: 800; line-height: 16px; min-height: 40px; outline: 0; padding: 12px 14px; text-align: center; text-rendering: geometricprecision; text-transform: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; } .button-24:hover, .button-24:active { background-color: initial; background-position: 0 0; color: #FF4742; } .button-24:active { opacity: .5; } </style> <span class="credits"> by Nomad List </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 25"> <button class="button-25" role="button">Button 25</button> </div> <style> .button-25 { background-color: #36A9AE; background-image: linear-gradient(#37ADB2, #329CA0); border: 1px solid #2A8387; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.12) 0 1px 1px; color: #FFFFFF; cursor: pointer; display: block; font-family: -apple-system,".SFNSDisplay-Regular","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 17px; line-height: 100%; margin: 0; outline: 0; padding: 11px 15px 12px; text-align: center; transition: box-shadow .05s ease-in-out,opacity .05s ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; } .button-25:hover { box-shadow: rgba(255, 255, 255, 0.3) 0 0 2px inset, rgba(0, 0, 0, 0.4) 0 1px 2px; text-decoration: none; transition-duration: .15s, .15s; } .button-25:active { box-shadow: rgba(0, 0, 0, 0.15) 0 2px 4px inset, rgba(0, 0, 0, 0.4) 0 1px 1px; } .button-25:disabled { cursor: not-allowed; opacity: .6; } .button-25:disabled:active { pointer-events: none; } .button-25:disabled:hover { box-shadow: none; } </style> <span class="credits"> by Gumroad </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 26"> <button class="button-26" role="button">Button 26</button> </div> <style> .button-26 { appearance: button; background-color: #1652F0; border: 1px solid #1652F0; border-radius: 4px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; font-family: Graphik,-apple-system,system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif; font-size: 14px; line-height: 1.15; overflow: visible; padding: 12px 16px; position: relative; text-align: center; text-transform: none; transition: all 80ms ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: fit-content; } .button-26:disabled { opacity: .5; } .button-26:focus { outline: 0; } .button-26:hover { background-color: #0A46E4; border-color: #0A46E4; } .button-26:active { background-color: #0039D7; border-color: #0039D7; } </style> <span class="credits"> by Coinbase </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 27"> <button class="button-27" role="button">Button 27</button> </div> <style> .button-27 { appearance: none; background-color: #000000; border: 2px solid #1A1A1A; border-radius: 15px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: 16px; font-weight: 600; line-height: normal; margin: 0; min-height: 60px; min-width: 0; outline: none; padding: 16px 24px; text-align: center; text-decoration: none; transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; will-change: transform; } .button-27:disabled { pointer-events: none; } .button-27:hover { box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; transform: translateY(-2px); } .button-27:active { box-shadow: none; transform: translateY(0); } </style> <span class="credits"> by Foundation </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 28"> <button class="button-28" role="button">Button 28</button> </div> <style> .button-28 { appearance: none; background-color: transparent; border: 2px solid #1A1A1A; border-radius: 15px; box-sizing: border-box; color: #3B3B3B; cursor: pointer; display: inline-block; font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; font-size: 16px; font-weight: 600; line-height: normal; margin: 0; min-height: 60px; min-width: 0; outline: none; padding: 16px 24px; text-align: center; text-decoration: none; transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; will-change: transform; } .button-28:disabled { pointer-events: none; } .button-28:hover { color: #fff; background-color: #1A1A1A; box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; transform: translateY(-2px); } .button-28:active { box-shadow: none; transform: translateY(0); } </style> <span class="credits"> by Foundation </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 29"> <button class="button-29" role="button">Button 29</button> </div> <style> .button-29 { align-items: center; appearance: none; background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%); border: 0; border-radius: 6px; box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-flex; font-family: "JetBrains Mono",monospace; height: 48px; justify-content: center; line-height: 1; list-style: none; overflow: hidden; padding-left: 16px; padding-right: 16px; position: relative; text-align: left; text-decoration: none; transition: box-shadow .15s,transform .15s; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; will-change: box-shadow,transform; font-size: 18px; } .button-29:focus { box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset; } .button-29:hover { box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset; transform: translateY(-2px); } .button-29:active { box-shadow: #3c4fe0 0 3px 7px inset; transform: translateY(2px); } </style> <span class="credits"> by Algolia </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 30"> <button class="button-30" role="button">Button 30</button> </div> <style> .button-30 { align-items: center; appearance: none; background-color: #FCFCFD; border-radius: 4px; border-width: 0; box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset; box-sizing: border-box; color: #36395A; cursor: pointer; display: inline-flex; font-family: "JetBrains Mono",monospace; height: 48px; justify-content: center; line-height: 1; list-style: none; overflow: hidden; padding-left: 16px; padding-right: 16px; position: relative; text-align: left; text-decoration: none; transition: box-shadow .15s,transform .15s; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; will-change: box-shadow,transform; font-size: 18px; } .button-30:focus { box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; } .button-30:hover { box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset; transform: translateY(-2px); } .button-30:active { box-shadow: #D6D6E7 0 3px 7px inset; transform: translateY(2px); } </style> <span class="credits"> by Algolia </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 31"> <button class="button-31" role="button">Button 31</button> </div> <style> .button-31 { background-color: #222; border-radius: 4px; border-style: none; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-family: "Farfetch Basis","Helvetica Neue",Arial,sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0; max-width: none; min-height: 44px; min-width: 10px; outline: none; overflow: hidden; padding: 9px 20px 8px; position: relative; text-align: center; text-transform: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; } .button-31:hover, .button-31:focus { opacity: .75; } </style> <span class="credits"> by Farfetch </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 32"> <button class="button-32" role="button">Button 32</button> </div> <style> .button-32 { background-color: #fff000; border-radius: 12px; color: #000; cursor: pointer; font-weight: bold; padding: 10px 15px; text-align: center; transition: 200ms; width: 100%; box-sizing: border-box; border: 0; font-size: 16px; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-32:not(:disabled):hover, .button-32: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); } .button-32:disabled { filter: saturate(0.2) opacity(0.5); -webkit-filter: saturate(0.2) opacity(0.5); cursor: not-allowed; } </style> <span class="credits"> by BeachNearby.com </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 33"> <button class="button-33" role="button">Button 33</button> </div> <style> .button-33 { 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; } .button-33: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); } </style> <span class="credits"> by CSS Scan </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 34"> <button class="button-34" role="button">Button 34</button> </div> <style> .button-34 { background: #5E5DF0; border-radius: 999px; box-shadow: #5E5DF0 0 10px 20px -10px; box-sizing: border-box; color: #FFFFFF; cursor: pointer; font-family: Inter,Helvetica,"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif; font-size: 16px; font-weight: 700; line-height: 24px; opacity: 1; outline: 0 solid transparent; padding: 8px 18px; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: fit-content; word-break: break-word; border: 0; } </style> <span class="credits"> by Typedream </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 35"> <button class="button-35" role="button">Button 35</button> </div> <style> .button-35 { align-items: center; background-color: #fff; border-radius: 12px; box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px; box-sizing: border-box; color: #121212; cursor: pointer; display: inline-flex; flex: 1 1 auto; font-family: Inter,sans-serif; font-size: 1.2rem; font-weight: 700; justify-content: center; line-height: 1; margin: 0; outline: none; padding: 1rem 1.2rem; text-align: center; text-decoration: none; transition: box-shadow .2s,-webkit-box-shadow .2s; white-space: nowrap; border: 0; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-35:hover { box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0; } </style> <span class="credits"> by Mouseless </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 36"> <button class="button-36" role="button">Button 36</button> </div> <style> .button-36 { background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%); border-radius: 8px; border-style: none; box-sizing: border-box; color: #FFFFFF; cursor: pointer; flex-shrink: 0; font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif; font-size: 16px; font-weight: 500; height: 4rem; padding: 0 1.6rem; text-align: center; text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px; transition: all .5s; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-36:hover { box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px; transition-duration: .1s; } @media (min-width: 768px) { .button-36 { padding: 0 2.6rem; } } </style> <span class="credits"> by Linear </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 37"> <button class="button-37" role="button">Button 37</button> </div> <style> .button-37 { background-color: #13aa52; border: 1px solid #13aa52; border-radius: 4px; box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0; box-sizing: border-box; color: #fff; cursor: pointer; font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 400; outline: none; outline: 0; padding: 10px 25px; text-align: center; transform: translateY(0); transition: transform 150ms, box-shadow 150ms; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-37:hover { box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0; transform: translateY(-2px); } @media (min-width: 768px) { .button-37 { padding: 10px 30px; } } </style> <span class="credits"> by MongoDB </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 38"> <button class="button-38" role="button">Button 38</button> </div> <style> .button-38 { background-color: #FFFFFF; border: 0; border-radius: .5rem; box-sizing: border-box; color: #111827; font-family: "Inter var",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: .875rem; font-weight: 600; line-height: 1.25rem; padding: .75rem 1rem; text-align: center; text-decoration: none #D1D5DB solid; text-decoration-thickness: auto; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-38:hover { background-color: rgb(249,250,251); } .button-38:focus { outline: 2px solid transparent; outline-offset: 2px; } .button-38:focus-visible { box-shadow: none; } </style> <span class="credits"> by Tailwind </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 39"> <button class="button-39" role="button">Button 39</button> </div> <style> .button-39 { background-color: #FFFFFF; border: 1px solid rgb(209,213,219); border-radius: .5rem; box-sizing: border-box; color: #111827; font-family: "Inter var",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: .875rem; font-weight: 600; line-height: 1.25rem; padding: .75rem 1rem; text-align: center; text-decoration: none #D1D5DB solid; text-decoration-thickness: auto; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-39:hover { background-color: rgb(249,250,251); } .button-39:focus { outline: 2px solid transparent; outline-offset: 2px; } .button-39:focus-visible { box-shadow: none; } </style> <span class="credits"> by Tailwind </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 40"> <button class="button-40" role="button">Button 40</button> </div> <style> .button-40 { background-color: #111827; border: 1px solid transparent; border-radius: .75rem; box-sizing: border-box; color: #FFFFFF; cursor: pointer; flex: 0 0 auto; font-family: "Inter var",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: 1.125rem; font-weight: 600; line-height: 1.5rem; padding: .75rem 1.2rem; text-align: center; text-decoration: none #6B7280 solid; text-decoration-thickness: auto; transition-duration: .2s; transition-property: background-color,border-color,color,fill,stroke; transition-timing-function: cubic-bezier(.4, 0, 0.2, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; width: auto; } .button-40:hover { background-color: #374151; } .button-40:focus { box-shadow: none; outline: 2px solid transparent; outline-offset: 2px; } @media (min-width: 768px) { .button-40 { padding: .75rem 1.5rem; } } </style> <span class="credits"> by Tailwind </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 41"> <button class="button-41" role="button">Button 41</button> </div> <style> .button-41 { background-color: initial; background-image: linear-gradient(-180deg, #00D775, #00BD68); border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif; height: 44px; line-height: 44px; outline: 0; overflow: hidden; padding: 0 20px; pointer-events: auto; position: relative; text-align: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; vertical-align: top; white-space: nowrap; width: 100%; z-index: 9; border: 0; } .button-41:hover { background: #00bd68; } </style> <span class="credits"> by FlightConnections.com </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 42"> <button class="button-42" role="button">Button 42</button> </div> <style> .button-42 { background-color: initial; background-image: linear-gradient(-180deg, #FF7E31, #E62C03); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif; height: 40px; line-height: 40px; outline: 0; overflow: hidden; padding: 0 20px; pointer-events: auto; position: relative; text-align: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; vertical-align: top; white-space: nowrap; width: 100%; z-index: 9; border: 0; transition: box-shadow .2s; } .button-42:hover { box-shadow: rgba(253, 76, 0, 0.5) 0 3px 8px; } </style> <span class="credits"> by FlightConnections.com </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 43"> <button class="button-43" role="button">Button 43</button> </div> <style> .button-43 { background-image: linear-gradient(-180deg, #37AEE2 0%, #1E96C8 100%); border-radius: .5rem; box-sizing: border-box; color: #FFFFFF; display: flex; font-size: 16px; justify-content: center; padding: 1rem 1.75rem; text-decoration: none; width: 100%; border: 0; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-43:hover { background-image: linear-gradient(-180deg, #1D95C9 0%, #17759C 100%); } @media (min-width: 768px) { .button-43 { padding: 1rem 2rem; } } </style> <span class="credits"> by Eatmore.io </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 44"> <button class="button-44" role="button">Button 44</button> </div> <style> .button-44 { background: #e62143; border-radius: 11px; box-sizing: border-box; color: #fff; cursor: pointer; display: flex; font-family: Mija,-apple-system,BlinkMacSystemFont,Roboto,"Roboto Slab","Droid Serif","Segoe UI",system-ui,Arial,sans-serif; font-size: 1.15em; font-weight: 700; justify-content: center; line-height: 33.4929px; padding: .8em 1em; text-align: center; text-decoration: none; text-decoration-skip-ink: auto; text-shadow: rgba(0, 0, 0, .3) 1px 1px 1px; text-underline-offset: 1px; transition: all .2s ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; word-break: break-word; border: 0; } .button-44:active, .button-44:focus { border-bottom-style: none; border-color: #dadada; box-shadow: rgba(0, 0, 0, .3) 0 3px 3px inset; outline: 0; } .button-44:hover { border-bottom-style: none; border-color: #dadada; } </style> <span class="credits"> by Smashing Magazine </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 45"> <button class="button-45" role="button">Button 45</button> </div> <style> .button-45 { align-items: center; background-color: #FFE7E7; background-position: 0 0; border: 1px solid #FEE0E0; border-radius: 11px; box-sizing: border-box; color: #D33A2C; cursor: pointer; display: flex; font-size: 1rem; font-weight: 700; line-height: 33.4929px; list-style: outside url(https://www.smashingmagazine.com/images/bullet.svg) none; padding: 2px 12px; text-align: left; text-decoration: none; text-shadow: none; text-underline-offset: 1px; transition: border .2s ease-in-out,box-shadow .2s ease-in-out; user-select: none; -webkit-user-select: none; touch-action: manipulation; white-space: nowrap; word-break: break-word; } .button-45:active, .button-45:hover, .button-45:focus { outline: 0; } .button-45:active { background-color: #D33A2C; box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px 0 inset; color: #FFFFFF; } .button-45:hover { background-color: #FFE3E3; border-color: #FAA4A4; } .button-45:active:hover, .button-45:focus:hover, .button-45:focus { background-color: #D33A2C; box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px 0 inset; color: #FFFFFF; } </style> <span class="credits"> by Smashing Magazine </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 46"> <button class="button-46" role="button">Button 46</button> </div> <style> .button-46 { align-items: center; background-color: rgba(240, 240, 240, 0.26); border: 1px solid #DFDFDF; border-radius: 16px; box-sizing: border-box; color: #000000; cursor: pointer; display: flex; font-family: Inter, sans-serif; font-size: 18px; justify-content: center; line-height: 28px; max-width: 100%; padding: 14px 22px; text-decoration: none; transition: all .2s; user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; } .button-46:active, .button-46:hover { outline: 0; } .button-46:hover { background-color: #FFFFFF; border-color: rgba(0, 0, 0, 0.19); } @media (min-width: 768px) { .button-46 { font-size: 20px; min-width: 200px; padding: 14px 16px; } } </style> <span class="credits"> by ls.graphics </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 47"> <button class="button-47" role="button">Button 47</button> </div> <style> .button-47 { align-items: center; background: #FFFFFF; border: 0 solid #E2E8F0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-sizing: border-box; color: #1A202C; display: inline-flex; font-family: Inter, sans-serif; font-size: 1rem; font-weight: 700; height: 56px; justify-content: center; line-height: 24px; overflow-wrap: break-word; padding: 24px; text-decoration: none; width: auto; border-radius: 8px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; } </style> <span class="credits"> by Chakra UI </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 48"> <button class="button-48" role="button"><span class="text">Button 48</span></button> </div> <style> .button-48 { appearance: none; background-color: #FFFFFF; border-width: 0; box-sizing: border-box; color: #000000; cursor: pointer; display: inline-block; font-family: Clarkson,Helvetica,sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1em; margin: 0; opacity: 1; outline: 0; padding: 1.5em 2.2em; position: relative; text-align: center; text-decoration: none; text-rendering: geometricprecision; text-transform: uppercase; transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1),background-color 100ms cubic-bezier(.694, 0, 0.335, 1),color 100ms cubic-bezier(.694, 0, 0.335, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: baseline; white-space: nowrap; } .button-48:before { animation: opacityFallbackOut .5s step-end forwards; backface-visibility: hidden; background-color: #EBEBEB; clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%); content: ""; height: 100%; left: 0; position: absolute; top: 0; transform: translateZ(0); transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1); width: 100%; } .button-48:hover:before { animation: opacityFallbackIn 0s step-start forwards; clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%); } .button-48:after { background-color: #FFFFFF; } .button-48 span { z-index: 1; position: relative; } </style> <span class="credits"> by Squarespace </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 49"> <button class="button-49" role="button">Button 49</button> </div> <style> .button-49, .button-49:after { width: 150px; height: 76px; line-height: 78px; 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; } .button-49: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); } .button-49: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) { .button-49, .button-49:after { width: 200px; height: 86px; line-height: 88px; } } </style> <span class="credits"> by Steven Lei </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 50"> <button class="button-50" role="button">Button 50</button> </div> <style> .button-50 { 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 0; 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; } .button-50:focus { text-decoration: none; } .button-50:hover { text-decoration: none; } .button-50:active { box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset; outline: 0; } .button-50:not([disabled]):active { box-shadow: #fff 2px 2px 0 0, #000 2px 2px 0 1px; transform: translate(2px, 2px); } @media (min-width: 768px) { .button-50 { padding: 12px 50px; } } </style> <span class="credits"> by Scoot </span> </li><li> <div class="button-wrapper" data-tippy-content="Click to copy button 51"> <button class="button-51" role="button">Button 51</button> </div> <style> .button-51 { background-color: transparent; border: 1px solid #266DB6; box-sizing: border-box; color: #00132C; font-family: "Avenir Next LT W01 Bold",sans-serif; font-size: 16px; font-weight: 700; line-height: 24px; padding: 16px 23px; position: relative; text-decoration: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-51:hover, .button-51:active { outline: 0; } .button-51:hover { background-color: transparent; cursor: pointer;