CSS3多样式小图标按钮

  • g0_909562
    了解作者
  • 2.6KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-27 04:06
    上传日期
这次我们要来分享一组纯CSS3打造的动画图标,总共100多个,每一个图标没有用图片,而是利用CSS3的相关特性来实现。在这些CSS3图标中,有部分是动态的,这些带动画的图标也是利用CSS3的动画属性实现的。
CSS3多样式小图标按钮.zip
  • CSS3多样式小图标按钮
  • index.html
    1.6KB
  • css
  • style.css
    5.4KB
内容介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3多样式小图标按钮DEMO演示</title> <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> </head> <body> <div style="text-align:center;clear:both"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <h2>Actions</h2> <a href="#" class="button" rel='nofollow' onclick='return false;'>Button</a> <a href="#" class="button add" rel='nofollow' onclick='return false;'>Add</a> <a href="#" class="button edit" rel='nofollow' onclick='return false;'>Edit</a> <a href="#" class="button delete" rel='nofollow' onclick='return false;'>Delete</a> <a href="#" class="button save" rel='nofollow' onclick='return false;'>Save</a> <a href="#" class="button email" rel='nofollow' onclick='return false;'>Send email</a> <br><br> <h2>Miscellaneous</h2> <a href="#" class="button like" rel='nofollow' onclick='return false;'>Like</a> <a href="#" class="button next" rel='nofollow' onclick='return false;'>Next</a> <a href="#" class="button star" rel='nofollow' onclick='return false;'>Favourite</a> <a href="#" class="button spark" rel='nofollow' onclick='return false;'>Spark</a> <a href="#" class="button play" rel='nofollow' onclick='return false;'>Play</a> <br><br> <h2>Social media buttons</h2> <a href="#" class="button tw" rel='nofollow' onclick='return false;'>Follow me</a> <a href="#" class="button fb" rel='nofollow' onclick='return false;'>Become a fan</a> <h2>Buttons and inputs</h2> <button class="button">Clean button</button> <button class="button save">Button with icon</button> <button class="button" disabled>Disabled button</button> <button class="button save" disabled>Another disabled button</button> <br> <input class="button" type="submit" value="Input submit"> <input class="button" type="button" value="Input button"> <input class="button" type="submit" value="Input submit disabled" disabled> <input class="button" type="button" value="Input button disabled" disabled> <br><br> <script src='http://codepen.io/assets/libs/fullpage/none.js'></script> </body> </html>
评论
    相关推荐