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按钮样式 复制即用的主要内容,如果未能解决你的问题,请参考以下文章

92款超级漂亮的css按钮样式 复制即用

94款超级漂亮的box-shadow样式 复制即用

94款超级漂亮的box-shadow样式 复制即用

94款超级漂亮的box-shadow样式 复制即用

分享几款非常漂亮的css 表格样式

二十款漂亮的CSS字体样式