html+css3圆形修边按钮

新建html文档。

书写hmtl代码。

初始化css代码。

书写css代码。.content hr { border: 0 none; margin: 0 0 1em 0; }label:after { color: #fff; content: '#'; }input { background: #fff0f5; border: 1px solid #222; color: #333; margin-right: 5.5em; padding: .5em; }.content { font-size: 100%; margin: 0 auto; display: inline-block; ; padding: 3em 6em; text-align: left; padding: 0; }.content p { color: #333; display: inline-block; font-size: 1em; font-weight: bold; line-height: 1; margin: -1em 1em 0 0; width: 6em; vertical-align: middle; }.footer { background-color: #333; color: #fff; font-size: 1em; font-weight: bold; line-height: 1; margin: 2em 0 0 0; padding: 2em; text-align: center; }.attribution { color: #888; margin-top: 1em; text-align: right; width: 100%; }.attribution a { color: #888; text-decoration: none; }.attribution a:hover, .attribution a:focus { color: #fff; }

代码整体结构。

查看效果。