好看的css3按钮和文本框
.button{
width: 80px;
line-height: 25px;
text-align: center;
font-weight:;
color: #fff;
text-shadow:1px 1px 1px #333;
border-radius: 5px;
margin:0 20px 20px 0;
position: relative;
overflow: hidden;
font-size:18px;
}
.button:nth-child(6n){
margin-right:;
}
.button.gray{
color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}
.round,
.side,
.tags{
padding-right: 30px;
}
.round:after{
position: absolute;
display: inline-block;
content: "\003c";
top:50%;
right:10px;
margin-top: -10px;
width: 17px;
height: 20px;
padding-left: 3px;
line-height:18px;
font-size: 10px;
font-weight: normal;
border-radius: 10px;
text-shadow:-2px 0 1px #333;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.gray.round:after{
box-shadow:1px 0 1px rgba(255,255,255,1) inset,1px 0 1px rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#dce1e6,#dde2e7);
background:-moz-linear-gradient(top,#dce1e6,#dde2e7);
background:linear-gradient(top,#dce1e6,#dde2e7);
text-shadow:-2px 0 1px #fff;
}
.side:after{
position: absolute;
display: inline-block;
content: "\00bb";
top:3px;
right:-4px;
width: 38px;
height:30px;
font-weight: normal;
line-height: 26px;
border-radius:0 0 5px 5px;
text-shadow:-2px 0 1px #333;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
transform:rotate(-90deg);
}
.gray.side:after{
text-shadow:-2px 0 1px #fff;
border-top: 1px solid #d4d4d4;
box-shadow:-2px 0 1px #eceef1 inset;
background:-webkit-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
background:-moz-linear-gradient(right,#e1e6ea,#f2f2f6 60%);
background:linear-gradient(right,#e1e6ea,#f2f2f6 60%);
} .tags:after{
font-weight: normal;
position: absolute;
display: inline-block;
content: "FREE";
top:-3px;
right: -33px;
color: #fff;
text-shadow:none;
width: 85px;
height:25px;
line-height: 28px;
-webkit-transform:rotate(45deg) scale(.7,.7);
-moz-transform:rotate(45deg) scale(.7,.7);
transform:rotate(45deg) scale(.7,.7);
}
.gray.tags:after{
background: #8c96a0;
border:2px solid #fff;
} .button.rarrow,
.button.larrow{
overflow:visible;
}
.rarrow:after,
.rarrow:before,
.larrow:after,
.larrow:before{
position:absolute;
content: "";
display: block;
width: 28px;
height: 28px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}
.rarrow:before{
width: 27px;
height: 27px;
top: 6px;
right: -13px;
clip: rect(auto auto 26px 2px);
}
.rarrow:after{
top: 6px;
right: -12px;
clip: rect(auto auto 26px 2px);
}
.gray.rarrow:before{
background: #d6dbe0;
}
.gray.rarrow:after{
box-shadow: 0 1px 0 #fff inset,-1px 0 0 #b7babd inset;
background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:linear-gradient(top left,#f2f3f7,#e4e8ec);
} .larrow:before{
top: 6px;
left: -13px;
width: 27px;
height: 27px;
clip: rect(2px 26px auto auto);
}
.larrow:after{
top: 6px;
left: -12px;
clip: rect(2px 26px auto auto);
}
.gray.larrow:before{
background: #d6dbe0;
}
.gray.larrow:after{
box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #fff inset;
background:-webkit-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:-moz-linear-gradient(top left,#f2f3f7,#e4e8ec);
background:linear-gradient(top left,#f2f3f7,#e4e8ec);
} .gray:hover{
background: -webkit-linear-gradient(top,#fefefe,#ebeced);
background: -moz-linear-gradient(top,#f2f3f7,#ebeced);
background: linear-gradient(top,#f2f3f7,#ebeced);
} .gray.side:hover:after{
background:-webkit-linear-gradient(right,#e7ebee,#f8f8f8 60%);
background:-moz-linear-gradient(right,#e7ebee,#f8f8f8 60%);
background:linear-gradient(right,#e7ebee,#f8f8f8 60%);
} .gray.rarrow:hover:after,
.gray.rarrow:hover:after{
background:-webkit-linear-gradient(top left,#fefefe,#ebeced);
background:-moz-linear-gradient(top left,#fefefe,#ebeced);
background:linear-gradient(top left,#fefefe,#ebeced);
}
.gray:active{
top:1px;
box-shadow: 0 1px 3px #a8abae inset,0 3px 0 #fff;
background: -webkit-linear-gradient(top,#e4e8ec,#e4e8ec);
background: -moz-linear-gradient(top,#e4e8ec,#e4e8ec);
background: linear-gradient(top,#e4e8ec,#e4e8ec);
}
.gray.rarrow:active:after,
.gray.larrow:active:after{
background:-webkit-linear-gradient(top left,#e4e8ec,#e4e8ec);
background:-moz-linear-gradient(top left,#e4e8ec,#e4e8ec);
background:linear-gradient(top left,#e4e8ec,#e4e8ec);
} .gray.rarrow:active:after{
box-shadow: 0 1px 0 #b7babd inset,-1px 0 0 #b7babd inset;
}
.gray.larrow:active:after{
box-shadow: 0 -1px 0 #b7babd inset,1px 0 0 #b7babd inset;
}
<button type="button" class="button gray">提交</button>
input[type="text"]{transition: border 0.5s;border-radius:5px 5px 5px 5px; height:20px; width:200px;}
input:focus{
animation: myfirst 1s linear 1s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 1s linear 1s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 1s linear 1s infinite alternate;
/* Opera: */
-o-animation: myfirst 1s linear 1s infinite alternate;} @-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {box-shadow: 0 0 0 #fff;}
100% {box-shadow: 0 0 10px #0CF;}
}
好看的css3按钮和文本框的更多相关文章
- Delphi 如何操作外部程序的控件(如按钮,文本框,单选按钮等)
看你要做什么,比较现在网络很流行的QQ.MSN这些软件都屏蔽了,你可能还可以访问一些小软件的这些控制,思路及方案如下(API函数自己去百度查一下)1.得到你要这个窗口的句柄 使用FindWindow2 ...
- jquery( 点击按钮出来文本框并限制文本框的个数)
// 首先呢 编辑这个文章 主要是用于和大家的交流 以便学习和交流!! <div class="form-group" id="spots"> ...
- Jquery禁止/恢复按钮与文本框代码
最近,加入了一个小项目,由浩哥带领我们几个人一起开发一个东西.幸运的是,我和胡志婷分到了一组,她可是一个具有丰富经验的牛人,对我也很好,哈哈. --背景 说点正事,最近,我们在进行项目的时候,提到了一 ...
- 【Android】5.1 按钮和文本框
分类:C#.Android.VS2015: 创建日期:2016-02-07 一.简介 1.Button 常规按钮. 2.TextView 文本视图,其功能和WPF的TextBlock控件类似,[工具箱 ...
- Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。
一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:
- TEXT文本编辑框4 点击按钮读取文本框内容到内表
*&---------------------------------------------------------------------* *& Report ZTEST_CWB ...
- JavaScript实现点击复制按钮复制文本框的内容,兼容IOS
<lable> <input type="text" id="txt"> <a href="javascript:;&q ...
- js中怎么使点击按钮后文本框获得焦点
<html> <head> <script type="text/javascript"> function setFocus() { docu ...
- vue点击按钮复制文本框内容
1.npm进行安装 npm install clipboard --save 2.在需要使用的组件中import 引用方法:import Clipboard from 'clipboard'; 3.添 ...
随机推荐
- python web编程-概念预热篇
互联网正在引发一场革命??不喜欢看概念的跳过,注意这里仅仅是一些从python核心编程一书的摘抄 这正是最激动人心的一部分了,web编程 Web 客户端和服务器端交互使用的“语言”,Web 交互的标准 ...
- Xcode 缓存 帮助文档 隐藏文件夹显示方法
删除Xcode的缓存路径是:/Users/用户名/Library/Developer/Xcode/DerivedData(默认情况下, 这是一个隐藏文件夹) 显示隐藏文件夹 指令如下:显示隐藏文件: ...
- struct 类型重定义
类型定义的那个头文件只需要在功能源文件里#include 开始在主函数源文件里也#include,所以出现了重定义
- Arduino101学习(一)——Windows下环境配置
一.Arduino IDE下载 要开发Arduino 101/Genuino 101,你需要先安装并配置好相应的开发环境.下载地址 http://www.arduino.cn/thread-5838- ...
- TCP, Scoket, HTTP
1.TCP连接 要想明白Socket连接,先要明白TCP连接.手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上 ...
- kafka基本原理学习
下载安装地址:http://kafka.apache.org/downloads.html 原文链接:http://www.jasongj.com/2015/01/02/Kafka深度解析 Kafk ...
- DSP using MATLAB 示例Example2.12
代码: b = [1]; a = [1, -0.9]; n = [-5:50]; h = impz(b,a,n); set(gcf,'Color','white'); %subplot(2,1,1); ...
- HTTP基础11--web(3)
邮件首部注入攻击 指 Web 应用中的邮件发送功能,攻击者通过向邮件首部 To 或 Subject 内任意添加非法内容发起的攻击.利用存在安全漏洞的 Web 网站,可对任意邮件地址发送广告邮件或病毒邮 ...
- 读书笔记和sprint总结
第八章 需求分析 主要是讲需求的分析,对于一个程序项目来说,我觉得,需求是这个项目的向导,他可以决定程序项目会发展成什么样子.书里面需求这里大致分为两个:软件需求和用户需求. 软件需求:我们不仅仅要 ...
- ZOJ3201 Tree of Tree(树形DP)
题目大概求一棵树中大小为k的子树的最大权和. dp[u][k]表示以u为根的子树中包含u结点的大小为k的子树的最大权和,然后树上背包转移转移很容易.. #include<cstdio> # ...