CSS 按钮代码

html-css09

CSS 按钮代码,第1张

把style里的部分加到你的CSS里面

<style>

a.anniu{ display:blockwidth:100pxheight:40pxbackground:url(这里写鼠标不碰的时候的背景图片，不需要的话把这段去掉就可以) no-repeat}

a:hover.anniu{ background:url(这里写鼠标触碰后按钮的背景图片) no-repeat}

</style>

<a class=anniu href=>main</a>

假设你的按钮的class是btn，两个背景图片分别是bg1.jpg和bg2.jpg，那么可以这样来做\x0d\x0acss部分：\x0d\x0a.btn {background:url(bg1.jpg)}\x0d\x0a.btn:hover {background:url(bg2.jpg)}\x0d\x0a\x0d\x0ahtml部分就很简单了，给input加个样式就行\x0d\x0a\x0d\x0a\x0d\x0a使用这个样式时别忘了先把input的默认样式，那些padding、margin、border什么的都清零，然后再定义一下宽高，这样出来的视觉效果会好些。

html:

<a href="">MORE<br>了解更多</a>

css:

a{

  border-radius:10px

  background:yellow

  color:#fff

  font-size:12px

  padding-left:20px

}

这样基本就能实现除了那个问号以外的样式了，如果想添加那个就加上一个背景图就行了，上面的代码改成：background:url("图片路径") no-repeat 10px center #0dd（这里的颜色可能不是你要的，你自己替换你想要的颜色就行了）另外你的基础不会就去学学基础吧，不要着急做东西，根据教程慢慢学，http://www.w3school.com.cn/css/index.asp