HTML5 + CSS3 的常用 button 样式

最新推荐文章于 2024-07-23 08:26:05 发布

cstester

最新推荐文章于 2024-07-23 08:26:05 发布

阅读量1k

点赞数

分类专栏： ASP.NET .NET C#

本文链接：https://blog.csdn.net/cstester/article/details/119078805

版权

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

摘要由CSDN通过智能技术生成

效果图：

不多比比，代码：

<!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;
}
/* ====================

最低0.47元/天解锁文章

cstester

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5 + CSS3 的常用 button 样式

效果图：不多比比，代码：<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Buttons</title><style> /* ============================================================================= HTML5 disp.
复制链接

扫一扫

专栏目录