使用button的:after伪类选择器内容的跳动
按钮的css样式,想要作个美观一点的按钮,使用:after伪类选择器在按钮后跟随"!!"的符号,但点击按钮时按钮的值内容动,但跟随的"!!"符合不动,这样看起来很难受,就尝试让"!!"也动起来,经过测试发现,只要将按钮的css样式设定为相对定位即可。这可能也是基础没有理解透彻导致的。
/*使用相对定位控制跟随内容是否会随这按钮一起跳动*/
position: relative;
.button{
height: 30px;
width: 65px;
border:1px solid #64c878;
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
background: -moz-linear-gradient(top,#90dfa2,#84d494);
background: linear-gradient(#90dfa2,#84d494);
text-align: left;
/*使用相对定位控制跟随内容是否会随这按钮一起跳动*/
position: relative;
/*
对按钮圆边角的设置
border-radius: 0px 100px 100px 0px;*/
} .button:after{
position: absolute;
content:'!!';
color: #b82929;
margin-left: 10px;
box-shadow: inset;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg); }
.button:active{
top: 1px;
box-shadow: 0 1px 3px #4d7254 inset,0 3px 0 #fff;
background-color: #000c0c;
background: -webkit-linear-gradient(top, #df4e58,#84d494);
background: -moz-linear-gradient(top,#df4e58,#84d494);
background: linear-gradient(#df4e58,#84d494);
}
按钮
<button type="submit" class="button" >登录</button>
效果如下:
登录
使用button的:after伪类选择器内容的跳动的更多相关文章
- js进阶 10-10 可见伪类选择器和内容伪类选择器的作用
js进阶 10-10 可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是 四个 包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- 前端(六)—— 伪类选择器:a标签的伪类、内容伪类、索引伪类、取反伪类
a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- 如何使用CSS伪类选择器
总览 CSS选择器允许你通过类型.属性.位于HTML文档中的位置来选择元素.本教程阐述了三个新选项:is().:where()和:has(). 选择器通常在样式表中使用.下面的示例会找到所有<p ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
随机推荐
- QT项目性能调优小记
最近的项目用到了QT 5.5,项目在运行过程中出现了一段时间CPU占用率持续25%,并频繁断网的情况,遂决定对项目性能进行优化. 优化工具也是VS2010自带的性能分析工具,具体的使用方法参见:htt ...
- 解决UISlider滑块不灵敏
由于UI给的thumbImage图片过小,默认UISlider开始拖动的手势范围只有thumbImage的大小之内. 为了解决这个问题需要创建一个子类继承于UISlider.重写其中的方法: - (C ...
- Call to static DateFormat
Bug: Call to method of static java.text.DateFormatPattern id: STCAL_INVOKE_ON_STATIC_DATE_FORMAT_INS ...
- vim visual模式 复制
按ESC再按“V”,进入visual模式 用键盘向左向右箭头选中要复制的文字,按两下"Y"键 再到要粘贴的地方,按“P”键即可. 转自: http://jingyan.baidu. ...
- 第三方苹果开发库之ASIHTTPRequest(翻译版)
本文转载至 http://www.cnblogs.com/daguo/archive/2012/08/03/2622090.html 来自:http://www.dreamingwish.com/ ...
- [Sdoi2014]数数[数位dp+AC自动机]
3530: [Sdoi2014]数数 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 834 Solved: 434[Submit][Status][ ...
- [原创]webpack动态设置css路径
在程序入口的最上方添加 __webpack_public_path__ = path; //your path //your app start here
- PhotoKit type类型
参考链接: https://www.jianshu.com/p/42e5d2f75452/ 1.获取图像类型 enum PHAssetCollectionType : Int { case Album ...
- hibernate Session的CRUD操作
使用Session里面的方法进行CRUD操作 (1) 增加 save 方法 (2) 查找 get 方法(根据id查) (3) 修改 update 方法 (4) 删除 delete 方法 1.增加 /* ...
- Swift编程语言学习6—— 闭包
闭包是自包括的函数代码块,能够在代码中被传递和使用. Swift 中的闭包与 C 和 Objective-C 中的代码块(blocks)以及其它一些编程语言中的 lambdas 函数比較类似. 闭 ...