CSS论坛 - Powered by Discuz! Board

标题: 漂亮CSS bottom(DIV CSS按钮)集合 [打印本页]

作者: divcss5 时间: 2011-4-10 10:56 标题: 漂亮CSS bottom(DIV CSS按钮)集合

纯DIV+CSS按钮演示图

CSS按钮演示地址：http://www.divcss5.com/fanli/css-bottom/
详细介绍地址：http://www.divcss5.com/template/m230.shtml

divcss5.com-anlniu.rar

纯DIV CSS bottom按钮下载地址：
点击下载大小：304.435KB

作者: icmilyc 时间: 2011-4-10 12:19

好有吸引力哦！！

作者: tgc5947415 时间: 2011-4-11 17:51 标题: 我回复了

看看可以下载吗不要是骗人的哟

作者: sj36980 时间: 2011-4-13 15:13

厉害！效果很炫哦~

作者: zhupengyu21 时间: 2011-4-14 09:12 标题: 很好看

真的很不错啊

作者: xhs1028 时间: 2011-4-14 14:17 标题: 谢谢楼主！

谢谢楼主！

作者: 小湤湤 时间: 2011-4-14 16:36

很不错。。

作者: xpzhen 时间: 2011-4-14 17:47 标题: 回复 1# divcss5 的帖子

多谢共享

作者: roycheng1990 时间: 2011-4-14 19:11 标题: beauty

好漂亮啊

作者: netwind 时间: 2011-4-15 11:51 标题: 看看

多谢共享！

作者: caff1234 时间: 2011-4-15 12:55

作者: wangy2.0 时间: 2011-4-15 13:52 标题: bucuo

不错不不错很好

作者: ucms102 时间: 2011-4-15 17:01 标题: 范德萨发生的

fdsafdsafsdafsdafds谢谢啊

作者: powersub 时间: 2011-4-16 20:41

好漂亮啊

作者: xulinzhen 时间: 2011-4-17 10:58 标题: 很好的东西

很厉害很强大东西

作者: shaole 时间: 2011-4-18 13:55

下来看看.

作者: anybin 时间: 2011-4-18 15:58 标题: 感谢分享

感谢分享！

作者: iebaby 时间: 2011-4-18 17:33 标题: 看一下效果

看一下效果

作者: 灰常灰 时间: 2011-4-18 18:24

看帖子，我就顶帖子，这是传统美德QQ:809002340 乐交朋友

作者: vaquero 时间: 2011-4-19 09:50

蛮不错的可以收藏下感谢分享

作者: shofeepeng 时间: 2011-4-19 11:01

挺好！感谢分享

作者: hmy射手座 时间: 2011-4-19 20:28

是不是用Js 在onmouserover时换图片啊

作者: ssdhaossd 时间: 2011-4-19 21:16 标题: 求

顶啊啊啊啊啊啊

喜欢

作者: waynemysky 时间: 2011-4-20 10:09

谢谢分享下来学习

作者: huwen945 时间: 2011-4-20 15:55 标题: 确实是不错的东

我下下来看看好东西大家分享

作者: kmycsy 时间: 2011-4-20 16:23

效果不错，值得学习

作者: yy0410 时间: 2011-4-21 09:57 标题: 回复 1# divcss5 的帖子

看看，想用到。

作者: hbsylx 时间: 2011-4-21 10:13 标题: 很给力

找了很久啦

作者: lxuan07 时间: 2011-4-21 10:55

非常好正好需要用到

作者: llj90 时间: 2011-4-21 13:15 标题: 谢谢分享

真的不错

作者: sdfgewt52 时间: 2011-4-21 13:33 标题: 看看看

看看例子好用不

作者: 哈哈 时间: 2011-4-21 21:32 标题: 希望能下载

不知道能不能下载

作者: flyrommy 时间: 2011-4-22 09:57

确实不错的说，想知道按钮的CSS怎么写的，不会图片做的吧

作者: shuhangv8 时间: 2011-4-22 13:16 标题: 好

太好看卡

作者: jtrsun1234 时间: 2011-4-22 16:42

谢谢分享

作者: sue1989 时间: 2011-4-22 17:16

学习学习！！

作者: fashao 时间: 2011-4-22 21:52 标题: 回复 1# divcss5 的帖子

作者: xj_plmm 时间: 2011-4-24 07:57 标题: 回复 1# divcss5 的帖子

需要，谢谢

作者: duiyibeijixing 时间: 2011-4-26 09:36

好漂亮，效果很酷

作者: teihoutei 时间: 2011-4-26 09:47 标题: beauty

好漂亮的按钮，顶！

作者: 6367249 时间: 2011-4-26 12:27

gdfgdfgfdgg

作者: ad061 时间: 2011-4-26 13:48 标题: 谢谢

:lol :lol :lol :lol :lol :lol :lol :lol :lol :lol :lol :lol :lol :lol

作者: showshmily 时间: 2011-4-26 17:43

我太纠结了还得回复才能下载

作者: swk0024 时间: 2011-4-26 19:13

不知道现在可以回复看行不行

作者: jiangnan55 时间: 2011-4-27 15:12

好有吸引力哦！！

作者: wdwbto 时间: 2011-4-27 15:39 标题: 看看

多谢共享！

作者: zhongcc 时间: 2011-4-27 17:56 标题: 回复啊，DDDDDDDDDDDDDD

回复啊，DDDDDDDDDDDDDD

作者: ahtest 时间: 2011-4-28 17:23 标题: 再麻烦也要看

再麻烦也要看

作者: jwenlee 时间: 2011-4-28 18:01

下载了。~~~~~~~~~~~~~~~~

作者: linjianzao 时间: 2011-5-3 09:20 标题: 看看可以下载吗

看看可以下载吗

作者: nf1kok 时间: 2011-5-3 16:30

omg...........

作者: sziitdivjiang 时间: 2011-5-4 14:20 标题: 这个东西值得学习

这个东西值得学习

作者: hzttc 时间: 2011-5-4 14:30

很好，很强大

作者: java454 时间: 2011-5-4 15:50 标题: 回复 1# divcss5 的帖子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
});
// ]]>
</script>
<style type="text/css">
#slider { margin:0; padding:0; list-style:none; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
#slider li { width:906px; height:386px; overflow:hidden; }
p#controls { margin:0; position:relative; }
#prevBtn,
#nextBtn { display:block; margin:0; overflow:hidden; width:44px; height:44px; position:absolute; left:0; top:-250px; }
#nextBtn { left:862px; }
#prevBtn a { display:block; width:44px; height:44px; background:url(images/l_arrow.gif) no-repeat 0 0; }
#nextBtn a { display:block; width:44px; height:44px; background:url(images/r_arrow.gif) no-repeat 0 0; }
</style>
</head>
<body>
<div class="main">
  <div class="header">
<div class="block_header">
   <div class="logo"><a href="index.html"><img src="images/logo.gif" width="401" height="145" border="0" alt="logo" /></a></div>
   <div class="menu">
      <ul>
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="services.html">About us</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
      </ul>
   </div>
   <div class="clr"> </div>
</div>
  </div>
  <div class="slider">
<div class="slice1">
   <div id="slider">
      <ul>
      <li>
         <div class="top" style="background:url(images/sliser_bg_img_1.jpg) top no-repeat;">
            <h2><a href="http://www.divcss5.com/">CSS</a> Dummy text of the printing and typesetting industry.</h2>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer. <a href="#">Simply dummy text of the printing</a> and typesetting industry. Lorem Ipsum has been the industry's </p>
         </div>
         <div class="bot">
         <div class="lister">
            <p class="active">1</p>
            <p>2</p>
            <p>3</p>
            </div>
            <h2>Simply dummy text</h2>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since.</p>
         </div>
      </li>
      <li>
         <div class="top" style="background:url(images/sliser_bg_img_2.jpg) top no-repeat;">
            <h2>Dummy text of the printing and typesetting industry.</h2>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer. <a href="#">Simply dummy text of the printing</a> and typesetting industry. Lorem Ipsum has been the industry's </p>
         </div>
         <div class="bot">
         <div class="lister">
            <p>1</p>
            <p class="active">2</p>
            <p>3</p>
            </div>
            <h2>Simply dummy text</h2>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since.</p>
         </div>
      </li>
      <li>
         <div class="top" style="background:url(images/sliser_bg_img_3.jpg) top no-repeat;">
            <h2>Dummy text of the printing and typesetting industry.</h2>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer. <a href="#">Simply dummy text of the printing</a> and typesetting industry. Lorem Ipsum has been the industry's </p>
         </div>
         <div class="bot">
         <div class="lister">
            <p>1</p>
            <p>2</p>
            <p class="active">3</p>
            </div>
            <h2>Simply dummy text</h2>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since.</p>
         </div>
      </li>
      </ul>
   </div>
</div>
  </div>
  <div class="body">
<div class="body_resize">
   <div class="Author">
      <h2>About the Author</h2>
      <img src="images/img_1.gif" alt="picture" width="97" height="89" hspace="20" vspace="5" />
      <p>Lorem Ipsum has been the industry's standard dummy text ever since thes, when an unknown printer.<a href="#"> Simply dummy text</a> of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since thes, when an unknown printer.</p>
      <p><a href="#"><img src="images/read_more.gif" alt="picture" width="68" height="20" border="0" /></a></p>
   </div>
   <div class="animator">
      <p><img src="images/img_4.gif" alt="picture" width="169" height="126" /> <img src="images/img_3.gif" alt="picture" width="169" height="126" /><img src="images/img_2.gif" alt="picture" width="170" height="126" /></p>
      <h2>Dummy text of the printing and typesetting industry.</h2>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since thes,<a href="#"> when an unknown printer. Simply dummy text</a> of the printing and typesetting industry. </p>
   </div>
   <div class="clr"></div>
</div>
<div class="clr"></div>
  </div>
  <div class="FBG">
<div class="Fbg_resize">
   <div class="Twitter">
      <p><img src="images/Twitter.gif" alt="picture" width="129" height="96" /></p>
      <p><strong>Lorem Ipsum has been</strong> The industry's standard dummy text ever since thes. <a href="#"><img src="images/read_more.gif" alt="picture" width="68" height="20" border="0" /></a></p>
   </div>
   <div class="con">
      <h2>Contact us</h2>
      <ul>
      <li>Name of the Company</li>
      <li> 2901 Marmora Road, Glassgow, D04 59GR</li>
      <li> Telephone: +1 234 567 8910</li>
      </ul>
      <ul>
      <li>FAX: +1 234 567 8910</li>
      <li>E-mail: <a href="#">mail@yoursitename.com</a></li>
      </ul>
   </div>
</div>
<div class="clr"></div>
  </div>
  <div class="footer">
<div class="resize">
   <div>Copyright © Sitename.com. <a href="http://www.divcss5.com/">DIV+CSS</a>. All Rights Reserved<br />
      <a href="index.html">Home</a> | <a href="contact.html">Contact</a> | <a href="blog.html">RSS</a></div>
</div>
<p class="clr"></p>
  </div>
</div>
</body>
</html>

作者: fly533 时间: 2011-5-4 15:57 标题: 看看可以下载吗不要是骗人的哟

看看可以下载吗不要是骗人的哟

作者: afngti 时间: 2011-5-5 17:38

谢谢分享

作者: jiangjianping42 时间: 2011-5-5 22:11

xiexiefenxiang

作者: xdsofts 时间: 2011-5-6 18:38

看看如何

作者: DQking 时间: 2011-5-6 22:06

好漂亮啊

作者: q49695520 时间: 2011-5-6 22:57

纯DIV+CSS按钮演示图，很好看，感谢呀

作者: fighter 时间: 2011-5-8 11:35 标题: 经

好想看看

作者: yangjw666 时间: 2011-5-9 13:51

学习学习

作者: dttfr 时间: 2011-5-9 17:28

谢谢楼主分享，很好的东西

作者: liyanghengda 时间: 2011-5-9 19:39 标题: 好东西，正在找这个

好东西，正在找这个

作者: kang 时间: 2011-5-10 10:12 标题: 看看

谢谢共享

作者: yulovep_;anda 时间: 2011-5-11 11:36 标题: 看看效果

看看效果

作者: rocket2011 时间: 2011-5-11 15:02 标题: aa

xiexie......

作者: skachen 时间: 2011-5-11 15:26

3q very much

作者: kayainsz 时间: 2011-5-11 17:25 标题: 回复 1# divcss5 的帖子

不知我能不能使用

作者: lunhui0618 时间: 2011-5-11 22:50 标题: 好贴啊啊啊啊啊啊啊啊啊啊啊

好贴啊啊啊啊啊啊啊啊啊啊啊

作者: cqfengtao 时间: 2011-5-12 15:13

好东西，支持一下

作者: lyl28325905 时间: 2011-5-12 16:42

好有吸引力哦！！

作者: dmgyswf 时间: 2011-5-13 09:01

多谢分享！收藏了

作者: 阿俊2010 时间: 2011-5-13 10:26 标题: 回复 1# divcss5 的帖子

好东西，顶起

作者: jennytian 时间: 2011-5-13 14:28

css功能太强大了，做出来的效果真漂亮

作者: hyzaa 时间: 2011-5-14 11:12

我要看啊，，快点

作者: laizida 时间: 2011-5-14 18:26 标题: 靠右侧上下滚动可展开的快速联系方式CSS特效

靠右侧上下滚动可展开的快速联系方式CSS特效

作者: 墨北 时间: 2011-5-14 19:04

看看谢谢

作者: yinfoo 时间: 2011-5-15 23:10

afwefwwefawef

作者: a462705744 时间: 2011-5-16 10:41 标题: 多谢

多谢共享文件

作者: zzl19901230 时间: 2011-5-16 11:11

跟flash的媲美了，帅~~

作者: cl1132002 时间: 2011-5-16 11:42 标题: 下载看看

看看可以下载吗不要是骗人的哟

作者: liuxinming 时间: 2011-5-17 10:27 标题: 好有吸引力哦！！

好有吸引力哦！！

作者: banian 时间: 2011-5-19 10:50

看看~~ 谢谢

作者: tj6614 时间: 2011-5-19 13:40

高手啊，学习

作者: arui 时间: 2011-5-19 15:22 标题: 回复 1# divcss5 的帖子

作者: 神的灰姑娘 时间: 2011-5-20 11:21

需要学习

作者: wolfzhou 时间: 2011-5-20 15:36 标题: 实用

很好，非常感谢！！！！！！

作者: wangbing726 时间: 2011-5-20 15:40 标题: 好漂亮呵呵

我收下了吸血

作者: shaka915 时间: 2011-5-20 16:27

多谢分享了哦

作者: yzx001 时间: 2011-5-21 20:47 标题: 漂亮table+div+css+js幻灯片网页

漂亮table+div+css+js幻灯片网页

作者: a6735871 时间: 2011-5-21 21:43 标题: 可以啊

塑料袋机卡分离是福建

作者: jerry_vista 时间: 2011-5-22 14:46

多谢共享！

作者: liuyuno 时间: 2011-5-22 20:55

aaasdasdaaas

作者: wu1234a 时间: 2011-5-23 15:52

不错不错，尤其那个会变色的

作者: yang3 时间: 2011-5-23 20:54 标题: 能不能下呀！

能下吗？

作者: ljjjjkkll 时间: 2011-5-24 09:33

好漂亮的按钮！！

作者: jakes1985 时间: 2011-5-24 12:43

haha找到了

作者: sunyongxing 时间: 2011-5-24 14:06 标题: good

我感觉做特太好了

作者: aibushi 时间: 2011-5-24 14:47 标题: 好漂亮

如何做出来的啊，学习来了

欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)