网页设计 百分网手机站

几款不错的按钮样式(3)

时间:2020-08-07 19:59:42 网页设计

几款不错的按钮样式汇总

  * html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }

  .btn.blue { background: #2ae; }

  .btn.green { background: #9d4; }

  .btn.pink { background: #e1a; }

  .btn:hover { background-color: #a00; }

  .btn:active { background-color: #444; }

  .btn[class] {  background-image: url(shade.png); background-position: bottom; }

  * html .btn { border: 3px double #aaa; }

  * html .btn.blue { border-color: #2ae; }

  * html .btn.green { border-color: #9d4; }

  * html .btn.pink { border-color: #e1a; }

  * html .btn:hover { border-color: #a00; }

  p { clear: both; padding-bottom: 2em; }

  form { margin-top: 2em; }

  form p .btn { margin-right: 1em; }

  textarea { margin: 1em 0;}

  </style>

  </head>

  <body>

  <p><a href="#" class="btn blue">This is a blue button</a></p>

  <p><a href="#" class="btn green">This should be a green button</a></p>

  <p><big><a href="#" class="btn blue big">Big Text</a></big></p>

  <form method="post" action="#">

  <fieldset>

  <legend>Form Example</legend>

  <p><input type="text" /></p>

  <p><textarea cols="40" rows="10"></textarea></p>

  <p><input type="Button" id="reset_btn" value="Reset" class="btn" /> <input type="Submit" id="submit_btn" value="Submit this form" class="btn pink" /></p>

  </fieldset>

  </form>

  </body>

  </html>

【几款不错的按钮样式汇总】相关文章:

Java标签、按钮和按钮事件简介12-01

Photoshop制作网页按钮的方法09-29

车内不能随便按的按钮05-18

Dreamweaver创建图形提交按钮08-04

网页设计中如何设计按钮11-15

Dreamweaver插入单选按钮的五个技巧08-02

如何用photoshop制作苹果风格的按钮11-27

Photoshop绘制质感的立体按钮的处理教程12-09

photoshop高光常用按钮的制作方法11-27

Office的样式使用方法10-06