html 按键hover,按钮hover效果

今天看一个网站的按钮效果不错就试着做了一下，可是怎么也不出效果，大家看下问题在哪里。

a标签没有添加overflow: hidden;效果是正常，以添加这个属性就出错了(背景不能完全覆盖)，要点一下才正常，但是如果换成别的标签，即使点击也不会正常。

Document

* {margin: 0;padding: 0;box-sizing: border-box;}

a {width: 300px;height:80px;margin:100px auto;display:block;border: 2px solid #000000;color: #000000;text-align:center;line-height:80px;text-decoration: none;position:relative;overflow: hidden;}

a:before {content: '';position:absolute;}

a:after {content: '';background-color:lightgreen;width: 200%;height: 0%;position:absolute;top:50%;left:50%;transform: translateX(-50%) translateY(-50%) rotate(45deg);transition: all 0.4s;z-index:-1;}

a:hover {color:#ffffff;}

a:hover:after {height: 400%;transform: translateX(-50%) translateY(-50%) rotate(45deg);}

这是一个按钮

html 按键hover,按钮hover效果相关推荐

鼠标动效html,5种纯CSS3鼠标hover按钮动画效果
这是一款鼠标hover按钮动画特效.该特效共有5种hover动画效果,它们在结构布局上使用flex来进行布局,并通过css transition来实现动画效果. 使用方法 HTML结构该按钮特效使用 ...
css 按钮hover有光影效果
html: <div class="bgpattern"><div class="bgpattern_bg ...
【CSS】实现按钮hover时背景色从左慢慢移动到右边
按钮鼠标移动上去时,新背景色从左到右滑过去思路: 1.正常情况下: 按钮通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大,且在按钮的下面,刚开始宽度为0 2.鼠标移动过去: ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
vue图片点击超链接_vue使用v-for实现hover点击效果
使用Vue来实现鼠标悬停效果.可以使用事件处理器v-on指令(简写为:@)来完成.为标签绑定mouseenter以及mouseleave事件即可. hover是css中的选择器,用于选择鼠标指针浮动在 ...
CSS解决hover选择器生硬效果
在这里就简单的放了一张图片.来说明hover生硬的问题.现在来看,第一个代码可以实现放大缩小了.但是问题随之来了.体验太差了.这不是我想要的....改进 <style> img { wid ...
Labview Xcontrol基础实现变色Hover按钮
使用Labview自定义控件功能可以轻松定义控件的外观形态,在平时的一些常规应用中,只需要[基础控件+定义外观形态]就够了,不过要实现一些特定需求的控件可能就比较麻烦了. 这一节记录怎么实现一个简单的 ...
android 按钮动画效果_【css特效】按钮动画 - 按压效果
按钮动画 - "按压效果"codepen.io <!DOCTYPE html> <html> <head><meta charset=& ...
如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 ...

html 按键hover,按钮hover效果

html 按键hover,按钮hover效果相关推荐

最新文章

热门文章