HTML5 + CSS3 的常用 button 样式_h5 button样式-优快云博客

本文链接：https://blog.youkuaiyun.com/cstester/article/details/119078805

本文展示了如何使用HTML5和CSS3创建吸引人的button样式，通过代码实例详细解析了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

不多比比，代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buttons</title>
<style>
  /* =============================================================================
     HTML5 display definitions
     ========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline;*zoom: 1;}
audio:not([controls]) { display: none; }
[hidden] {display: none;}
/* =============================================================================
     Base
     ========================================================================== */

  /*
   * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
   * 2. Force vertical scrollbar in non-IE
   * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
   */

html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
} 
body {
    margin: 0;
    font-size: 13px;
    line-height: 1.231;
}
body, button, input, select, textarea {
    font-family: sans-serif;
    color: #222;
}

  /* 
   * Remove text-shadow in selection highlight: 
   * These selection declarations have to be separate
   * Also: hot pink! (or customize the background color to match your design)
   */

::-moz-selection {
background: #fe57a1;
color: #fff;
text-shadow: none;
}
::selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}
/* =============================================================================
     Links
     ========================================================================== */

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers */
a:hover, a:active { outline: 0; }
body { background: #f7f7f7; }
#container {
    width: 530px;
    margin: 60px auto;
    list-style: none;
    padding: 0 77px;
}
#container ul { width: 400px; }
#container li { display: inline; }
a.button {
    display: block;
    float: left;
    position: relative;
    height: 25px;
    width: 80px;
    margin: 0 10px 18px 0;
    text-decoration: none;
    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radiu