无聊之时用css3自制了好看的button样式和input样式

按扭样式

.buttonStyle{height: 27px;width: 80px;border: 0;background-color:#6C6C6C;box-shadow:0 0 1px #272727,0 0 10px 2px #3C3C3C,0 0 10px  4px #4F4F4F;border-radius: 4px;font-family: Calibri;font-weight: 800;font-style: italic;color: aqua;cursor: pointer;
}
.buttonStyle:hover{animation: buttonEffect 0.4s linear;transition-timing-function: linear;
}
.buttonStyle:active{transform: scale(1.2);bottom: -3px;transition-timing-function: ease-in-out;
}
@keyframes buttonEffect {0%{background: radial-gradient(ellipse 20px 8px,white,black,black);}20%{background: radial-gradient(ellipse 30px 12px,white,black,black);}40%{background: radial-gradient(ellipse 40px 16px,white,black,black);}60%{background: radial-gradient(ellipse 50px 20px,white,black,black);}80%{background: radial-gradient(ellipse 60px 24px,white,black,black);}100%{background: radial-gradient(ellipse 70px 280px,white,black,black);}
}

文本输入框样式

.inputStyle{width: 200px;height: 30px;background-color:#4F4F4F;border-radius: 8px;border-width: 5px 5px 5px 5px;border-style: inset;border-color: black;font-family: "Droid Sans Mono Slashed";font-weight: 300;font-style: italic;color: aqua;}
.inputStyle:focus{background-color:black;
}
.inputStyle:hover{animation: inputEffect 0.8s linear;transition-timing-function: linear;
}
@keyframes inputEffect {0%{border-top-color: aqua;background: linear-gradient(to right,aqua,black 20%)}25%{border-right-color: aqua;background: linear-gradient(to right,aqua,black 40%)}50%{border-bottom-color: aqua;background: linear-gradient(to right,aqua,black 60%)}75%{border-left-color: aqua;background: linear-gradient(to right,aqua,black 80%)}100%{border-color: cyan;background: linear-gradient(to right,aqua,black 100%)}
}

无聊之时用css3自制了好看的button样式和input样式相关推荐

css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...
Python可视化matplotlib自定义：运行时参数修改、自定义样式、默认样式+plt.style.use()
Python可视化matplotlib自定义:运行时参数修改.自定义样式.默认样式+plt.style.use() 目录 Python可视化matplotlib自定义:运行时参数修改.自定义样式.默认 ...
CSS3特效 - 会呼吸的button按钮
CSS3特效 - 会呼吸的button按钮动画过度都很流畅.这里以gif为模拟效果. 1. 效果图 2. 代码如下 <!DOCTYPE html> <html> <he ...
CSS3设置Div左右两边或者上下边框的样式
关于CSS3设置Div左右两边或者上下边框的样式目前可以通过如下方法,实现div只显示某些边框. 1.border: 1px dashed lightgray; border-top: none; ...
html页面加载有时没有网样式,网站css样式不加载是什么原因？
有时当我们打开网页时,网页布局完整,但却没有任何布局样式显示.这是什么原因?为什么网站css样式不加载了?下面给大家介绍一些无法加载css样式的原因. 网站css样式不加载是什么原因? 网站css样式 ...
HTML文字阴影火焰,CSS3利用text-shadow属性实现多种效果的文字样式展现方法
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
css动画其他div,删除另一个div时的CSS3 Transition动画
如果您的div具有相似的高度,则可以这样做. 关键是为列表中第一项的边距高度设置动画. .test { left: 0px; top: 0px; width: 400px; height: 300px ...
Qt自制简易好看的日志系统
简介预览原理 html格式的log Qt的log系统融合文件句柄复用多线程测试 github仓库链接简介一个完善的软件工程,自然是少不了log系统的. 这次涛哥教大家,用最少的代码做一个 ...
无聊就来整活—Python自制小鸟管道游戏【含完整代码】
开发工具 Python版本:3.6.4 相关模块: pygame模块以及一些Python自带的模块. 环境搭建安装Python并添加到环境变量,pip安装需要的相关模块即可原理介绍 Flappy ...
滚动屏幕时绚烂css3的动画效果
看到一些网站,鼠标一滚就有炫酷的动画效果,一直很想知道怎么弄的,今天动手实践了下,真的好简单!!!哈哈哈!!! //引入动画样式表 <link href="css/animate.cs ...

无聊之时用css3自制了好看的button样式和input样式

无聊之时用css3自制了好看的button样式和input样式相关推荐

最新文章

热门文章