a{
font-family:Arial;
font-size:.8em;
text-align:center;
margin:3px;
}
a:link,a:visited{
color:#A62020;
padding:4px 10px;　　/*鼠标放上前字体位置*/
background-color:#ecd8db;
text-decoration:none;
border-top:1px solid #EEE;
border-left:1px solid #EEE;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}
a:hover{
color:#821818;
padding:5px 8px 3px 12px;　　/*鼠标放上后字体位置*/

background-color:#e2c4c9;
border-top:1px solid #717171;
border-left:1px solid #717171;
border-bottom:1px solid #EEE;
border-right:1px solid #EEE;
}

纯css 超链接变按钮的更多相关文章

  1. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  2. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  3. 前端每日实战：147# 视频演示如何用纯 CSS 创作透视按钮的悬停特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qJEdKb 可交互视频 此视频是可 ...

  4. 32.纯 CSS 创作六边形按钮特效

    原文地址:https://segmentfault.com/a/1190000015020964 感想:简简单单的动画特效,位置,动画. HTML代码: <nav> <ul> ...

  5. 如何用纯 CSS 创作一个按钮文字滑动特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 在线预览 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教 ...

  6. 如何用纯 CSS 创作六边形按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xjoOeM 可交互视频教 ...

  7. 前端每日实战：32# 视频演示如何用纯 CSS 创作六边形按钮特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xjoOeM 可交互视频教程 此视频 ...

  8. 前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程 此视频 ...

  9. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

随机推荐

  1. LeetCode -- Merge Two Sorted Linked List

    Question: Merge two sorted linked lists and return it as a new list. The new list should be made by ...

  2. [洛谷P3195][HNOI2008]玩具装箱TOY

    题目大意:有n个物体,大小为$c_i$.把第i个到第j个放到一起,容器的长度为$x=j-i+\sum\limits_{k-i}^{j} c_k$,若长度为x,费用为$(x-L)^2$.费用最小. 题解 ...

  3. WIndows 相关知识

    Windows服务 图解WinXP局域网共享设置步骤 Win10如何搭建FTP服务器以实现快速传输文件 强大工具psexec工具用法简介 BIOS和CMOS的区别 系统CLSID简介和小技巧

  4. Link Cat Tree （连喵树） 学习笔记

    Link Cat Tree 一.感性定义 所谓连喵树,即一种对森林支持修改,查询,连边,删边等操作的数据结构(姑且算她是吧).她用一颗颗互相连接的辅助树维护原森林的信息,辅助树相互连接的边叫虚边,辅助 ...

  5. 停课day5

    一转眼,已经停课五天了. 高二大佬们已经都走了,在机房里面呆着,有时感觉很孤寂. 但是为了能学好竞赛,这些都是在所不惜的. 好像多打打比赛啊,可是cf要FQ,洛谷之类的比赛还不勤. 哎,先去学一发SP ...

  6. MySQL的字符集小结

    正确了解MySQL的字符集问题,能够从根本上解决乱码的困扰. 首先,MySQL的字符集问题主要是两个概念,一个是Character Sets,一个是Collations,前者是字符内容及编码,后者是对 ...

  7. codeforces 1015C

    C. Songs Compression time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. ubuntu12.04 Qt WebKit编译

    转载自:http://my.oschina.net/u/257674/blog/167050 官方文档: http://trac.webkit.org/wiki/BuildingQtOnLinux#D ...

  9. Spring学习--HelloWorld

    Spring: Spring 是一个开源框架. Spring 是为简化企业级应用开发而生,使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能. Spring 是一 ...

  10. 精通javascript笔记(智能社)——数字时钟

    JS代码: <script type="text/javascript">    window.onload=function(){ //小于10的数字补零及数字转字符 ...