92款超级漂亮的css按钮样式 复制即用
Posted 征途黯然.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;以上是关于92款超级漂亮的css按钮样式 复制即用的主要内容，如果未能解决你的问题，请参考以下文章