使用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 ...
随机推荐
- MySQL四:表操作
阅读目录 表介绍 一 创建表 二 查看表结构 三 数据类型 四 表完整性约束 五 修改表ALTER TABLE 六 复制表 七 删除表 八 完整性约束 九 数据类型 表介绍 表相当于文件,表中的一条记 ...
- DuiVision开发教程(18)-弹出窗
DuiVision的弹出窗体类CDlgPopup,是菜单.下拉列表等控件的父类,也能够单独使用,用于创建弹出窗体.弹出窗体默认是非激活状态下自己主动关闭,比如鼠标点击到弹出窗体外面的区域,弹出窗体就会 ...
- Unity3D性能优化之Draw Call Batching
在屏幕上渲染物体,引擎需要发出一个绘制调用来访问图形API(iOS系统中为OpenGL ES).每个绘制调用需要进行大量的工作来访问图形API,从而导致了CPU方面显著的性能开销. Unity在运行时 ...
- 系统服务-----NotificationManager
熟悉api事例笔记: package com.test; import com.example.test.R; import android.app.Activity; import android. ...
- Iwfu-GitHubclient使用
Git/GitHub介绍 GitHub是著名的项目托管平台,有关Git和GitHub的介绍參考以下链接: Git介绍 url=OlagjwbaAdSJ2pjckgJCLBYd-LFFTDBriRnLt ...
- 《TomCat与Java Web开发技术详解》(第二版) 第六章节的学习总结 ---- JSP技术
第六章主要介绍了JSP的相关知识. 1.JSP:是通过在HTML文件中加入java程序片段(Java Scriptlet)和JSP标记,就构成了JSP文件.JSP实质上是Servlet.JSP的API ...
- CentOS7 安装 Node.js
1.首先安装node.js 的版本管理工具 NVM,执行以下命令: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/ ...
- 由浅到深理解ROS(4)
消息和消息类型 节点能相互传递消息,节点之间通信也是基于消息.消息类型也就是数据类型数据类型,理解消息的类型很重要,因为它决定了消息的内容.也就是说,一个话题的消息类型能告诉你该话题中每个消息携带了哪 ...
- element开源框架
vue-element-admin:https://gitee.com/accest/bod-element https://gitee.com/liuyuantao/vue-element-ad ...
- [Sdoi2014]数数[数位dp+AC自动机]
3530: [Sdoi2014]数数 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 834 Solved: 434[Submit][Status][ ...