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. Dubbo 的 Helloworld

    前提条件 安装好了 ZooKeeper 作为注册中心 服务端 <?xml version="1.0" encoding="UTF-8"?> < ...

  2. WebSocket对象的创建及其与WebSocket服务器的连接(5)

    WebSocket接口的使用非常简单,要连接通信端点,只需要创建一个新的WebSocket实例,并提供希望连接URL. //ws://和wss://前缀分别表示WebSocket连接和安全的WebSo ...

  3. hdu 1133 Buy the Ticket (大数+递推)

    Buy the Ticket Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  4. dp类模板

    1.n串最长公共子序列 #include<cstdio> #include<cstring> #include<algorithm> using namespace ...

  5. [Leetcode] n queens ii n皇后问题

    Follow up for N-Queens problem. Now, instead outputting board configurations, return the total numbe ...

  6. Educational Codeforces Round 55:B. Vova and Trophies

    B. Vova and Trophies 题目链接:https://codeforc.es/contest/1082/problem/B 题意: 给出一个“GS”串,有一次交换两个字母的机会,问最大的 ...

  7. elk,centos7,filebeat,elasticsearch-head详细安装步骤

    先来张图,大致结构应该晓得,对吧! 安装jdk:至少1.8以上 yum -y localinstall jdk-8u73-linux-x64.rpm 安装elasticsearch5.2.1 用普通用 ...

  8. Spring Boot(一)

    1.注解  @EnableAutoConfiguration 官方文档:The @EnableAutoConfiguration annotation is often placed on your ...

  9. SpringMVC学习 -- 使用 POJO 对象绑定请求参数值

    Spring MVC 会按请求参数名和 POJO 属性名进行自动匹配 , 自动为该对象填充属性值 , 支持级联属性.如:address.province. package com.itdoc.spri ...

  10. float/文档流

    float : left | right | none | inherit; 文档流是文档中可显示对象在排列时所占用的位置. 浮动的定义: 使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻 ...