50个CSS按钮样式及代码_thinkcss资源-CSDN下载

共56个文件

jpg：43个

gif：10个

html：1个

需积分: 48 121 浏览量 2018-12-14 08:53:04 上传评论 5 收藏 302KB ZIP 举报

在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档呈现样式的语言。本资源“50个CSS按钮样式及代码”提供了一组丰富的按钮设计模板，旨在帮助开发者快速解决网页上按钮样式单一的问题，为网页增添视觉吸引力和用户体验。这50个CSS按钮样式涵盖了各种风格，从简洁的基本样式到复杂且绚丽的设计，满足不同设计需求。这些样式通常包括但不限于以下元素： 1. **颜色搭配**：不同的背景色和文字颜色组合，如单色、渐变色、对比色等，可以适应不同主题的网页设计。 2. **形状与边框**：圆形、矩形、带有圆角的各种按钮形状，以及不同宽度和风格的边框，增加了按钮的多样性。 3. **尺寸调整**：小、中、大等不同尺寸的按钮，适合放置在不同位置和用途。 4. **悬停效果**：鼠标悬停时按钮的动态变化，如颜色改变、阴影加深、放大缩小等，增强交互性。 5. **动画效果**：使用CSS3的transition和animation属性实现平滑过渡和动态效果，提升用户感知。 6. **字体与图标**：不同的字体风格、大小和图标组合，使得按钮信息更加直观。 7. **状态反馈**：激活、禁用、加载中的按钮状态，提供清晰的操作反馈。要使用这些CSS按钮样式，开发者只需将提供的CSS文件引入到项目中，通过设置HTML元素的class属性来应用相应的样式。例如，如果有一个类名为`btn-primary`的按钮样式，HTML代码可能如下： ```html <button class="btn-primary">点击我</button> ``` 这将使按钮应用`btn-primary`样式。根据实际需求，开发者还可以自定义和扩展这些样式，以达到更个性化的效果。 "50个CSS按钮样式及代码"是一个实用的资源，它简化了网页开发中按钮样式的创建过程，让设计师和开发者能够快速地打造出美观且具有功能性的按钮，提升网页的整体美感和用户体验。对于初学者而言，这也是一份很好的学习资料，可以深入理解CSS在实际项目中的应用。

资源推荐

资源详情

资源评论

收起资源包目录

50.zip （56个子文件）

button.css 8KB

image

button

help.gif 991B

bg20.jpg 13KB

bg19.jpg 10KB

bg7.jpg 6KB

bg10.jpg 2KB

bg37.jpg 377B

bg43.jpg 8KB

bg27.jpg 3KB

bg40.jpg 3KB

ok.gif 146B

bg46.jpg 8KB

reset.gif 262B

bg25.jpg 9KB

bg18.jpg 4KB

bg30.jpg 3KB

bg36.jpg 5KB

bg33.jpg 9KB

bg47.jpg 16KB

bg31.jpg 2KB

bg34.jpg 2KB

bg22.jpg 5KB

bg38.jpg 5KB

submit2.gif 592B

bg2.jpg 921B

bg44.jpg 5KB

bg41.jpg 12KB

bg17.jpg 6KB

favorite.gif 1KB

bg35.jpg 7KB

bg1.jpg 2KB

bg23.jpg 7KB

bg42.jpg 5KB

bg48.jpg 14KB

delete.gif 104B

bg16.jpg 3KB

bg50.jpg 5KB

bg24.jpg 11KB

css-logo.gif 3KB

bg26.jpg 6KB

bg12.jpg 7KB

bg11.jpg 6KB

submit1.gif 589B

bg49.jpg 11KB

submit3.gif 595B

bg29.jpg 7KB

bg13.jpg 14KB

bg3.jpg 3KB

bg32.jpg 5KB

bg21.jpg 7KB

bg39.jpg 343B

bg28.jpg 4KB

Thumbs.db 109KB

bg45.jpg 12KB

index.html 6KB

<!DOCTYPE html> <html> <head> <title>50个CSS超炫丽button按钮样式代码-www.thinkcss.com</title> <link href="button.css" rel="stylesheet" type="text/css" />  </head> <body> <A href="www.thinkcss.com">thinkcss</A>|<A href="www.thinkcss.com">CSS</A> <form id="form1" name="form1" method="" action="http://www.thinkcss.com/" target="_blank"> <div class="d1"> <input type="submit" value="Update" onMouseOver="this.style.borderColor='#75cd02'" onMouseOut="this.style.borderColor='#dcdcdc'" class="btn1 pbtn1" /> <input type="submit" value="Delete" onMouseOver="this.style.borderColor='#f76b00'" onMouseOut="this.style.borderColor='#dcdcdc'" class="btn2 pbtn1" /> <input type="submit" value="Reset" onMouseOver="this.style.borderColor='#86c6f7'" onMouseOut="this.style.borderColor='#dcdcdc'" class="btn3 pbtn1" /><br /> <input type="button" value="Submit" class="btn4" /> <input type="button" value="Button" class="btn5" /> <input type="button" value="Add Group" class="btn6" onMouseOver="this.style.backgroundPosition='left -35px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <button type="button" class="pbtn2"><img src="image/button/register.gif" alt="register" /></button> <button type="button" class="pbtn2 btn8"><img src="image/button/favorite.gif" alt="favorite" /></button> <button type="button" class="pbtn2 btn9"><img src="image/button/help.gif" alt="help" /></button><br /> <input type="button" class="btn10" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" value="Submit" /> <input type="button" class="btn11" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit" /> <input type="button" class="btn12" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit" /><br /> <button type="button" class="pbtn3"></button> <button type="button" class="pbtn3 btn14"></button> <button type="button" class="pbtn3 btn15"></button><br /> <button type="button" class="btn16"></button> <button type="button" class="btn17"></button> <button type="button" class="btn18"></button><br /> <button type="button" class="btn19" onMouseOver="this.style.backgroundPosition='left -36px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit"></button> <button type="submit" class="btn20" onMouseOver="this.style.backgroundPosition='left -37px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit"></button> <button type="submit" class="btn21" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit"></button><br /> <input type="button" class="btn22" value="Downloads!" onMouseOver="this.style.backgroundPosition='left -42px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn23" value="Call me !!" onMouseOver="this.style.backgroundPosition='left -45px'" onMouseOut="this.style.backgroundPosition='left top'" /> </div> <div class="d2"> <input type="button" class="btn24" value="Closed" onMouseOver="this.style.backgroundPosition='left -50px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn25" value="Submit" onMouseOver="this.style.backgroundPosition='left -49px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <input type="button" class="btn26" value="Submit" onMouseOver="this.style.backgroundPosition='left -36px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn27" value="Online" /> <input type="button" class="btn28" value="Rss Feed" /><br /> <input type="button" class="btn29" value="Submit" onMouseOver="this.style.backgroundPosition='left -43px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn30" value="Button" /> <input type="button" class="btn31" value="Search" /><br /> <input type="button" class="btn32" value="Search" /> <input type="button" class="btn33" value="Search" onMouseOver="this.style.backgroundPosition='left -49px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <input type="button" class="btn34" value="Button" /> <input type="button" class="btn35" value="Button" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn36" value="Button" onMouseOver="this.style.backgroundPosition='left -38px'" onMouseOut="this.style.backgroundPosition='left top'" /> </div> <div class="d3"> <input type="button" class="btn37" value="Hard rock" /> <input type="button" class="btn38" value="Your profile" /> <input type="button" class="btn39" value="British" /><br /> <input type="button" class="btn40" value="Development" /> <input type="button" class="btn41" onMouseOver="this.style.backgroundPosition='left -57px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <input type="button" class="btn42" value="Find out more" /> <input type="button" class="btn43" value="Enterprise Geteway" /><br /> <input type="button" class="btn44" value="Comments" /> <input type="submit" class="btn45" value="Submit" onMouseOver="this.style.backgroundPosition='left -75px';this.style.color='#bcf1a7';" onMouseOut="this.style.backgroundPosition='left top';this.style.color='#ffafaf';" /> <input type="button" class="btn46" value="Submit" onMouseOver="this.style.backgroundPosition='left -73px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <input type="submit" class="btn47" value="New user interface" onMouseOver="this.style.backgroundPosition='left -78px';this.style.color='#a15507';" onMouseOut="this.style.backgroundPosition='left top';this.style.color='#097b96';" /> <input type="button" class="btn48" value="Send Comments" onMouseOver="this.style.backgroundPosition='left -67px';this.style.color='#d7bff2';" onMouseOut="this.style.backgroundPosition='left top';this.style.color='#8bf8ff';" /><br /> <input type="button" class="btn49" /> <input type="button" class="btn50" /> </div> </form> </body> </html>

评论收藏

内容反馈