在上一篇文章中，我介绍了在 Photoshop 中设计按钮的简单方法。今天我们将尝试使用 HTML 和 CSS3 创建一个功能齐全的按钮。那么，让我们启动笔记本并开始工作吧。
HTML结构和基本样式
我们的项目将包含 2 个文件：index.html 和 style。 CSS。 HTML 文档仅包含必需的内容。我们的按钮是与 .button 类的常规链接： [html] Hello Stranger [html] 是时候进行一些基本的样式设置了。让我们将链接定义为线性块元素 – 这样我们将能够控制 WhatsApp 电话号码数据 其尺寸，并且它将在整个表面上保持可点击状态。我们还设置颜色填充。
文本大小和对齐方式
在本例中为居中： [css] a.button { display:inline-block;背景：4b82c5；内边距：10px 50px；字体大小：30px；文本对齐：居中；} [ css ]我们的按钮看起来还不是很令人印象深刻，但它功能齐全：[ iframe src = “.plkylos-blogcssbutton1 ” width = ” 100 % “高度=“135”。
渐变、描边和圆形
让我们给我们的元素一些特征CSS3 技术中最酷但也是最难掌握的技术之一是渐变。互联网上可以找到的各种应用程序都可以为我们提供帮助。我使用Ultimate CSS Gradient Generator因为它非常友好并且类似于在 Photoshop 中处理渐变。通过单击渐变栏下 我们所有参加的人都可 方的手柄来选择构成渐变的两种颜色。该应用程序将为您生成与大多数浏览器兼容的 CSS 代码。将收到的代码粘贴到样式表中。 [css] 背景：-moz-线性渐变（顶部，60a2d4 0%，325eb7 100%）； * FF3.6+ * 背景: -webkit-gradient(线性, 左上, 左下, color-stop(0%,60a2d4), color-stop(100%,325eb7)); * Chrome,Safari4+ * 背景: -webkit-线性渐变(顶部, 60a2d4 0%,325eb7 100%); * Chrome10+,Safari5.1+ * 背景: -o-线性渐变(top, 60a2d4 0%,325eb7 100%); * Opera 11.10+ * 背景: -ms-线性渐变(顶部, 60a2d4 0%,325eb7 100%); * IE10+ * 背景: 线性渐变(到底部, 60a2d4 0%, 325eb7 100%); * W3C * 过滤器: progid:DXImageTransform.Microsoft.gradient( startColorstr=’60a2d4′, endColorstr=’325eb7′,GradientType=0 ); * IE6-9 * [css] 添加舍入要容易得多。
请记住，border-radius 属性尚未被所有浏览器识别
我们必须使用所谓的供应商前缀，即分配给特定 bwb名录 浏览器的 CSS 规则的前缀。请记住，我们将正确、干净的 border-radius 属性放置在声明堆栈的末尾。 [css]-webkit-border-radius:6px; -moz-边框半径：6px； -o-边框半径：6px； border-radius:6px;[css] 添加描边只需选择适当的阴影，该阴影应该比渐变的最终颜色深一些色调。[ css ]border : 1pxsolid264585;[css] 这样一来，我们就会得到这个优雅的按钮。
