css怎么做免费注册的按钮（如何用CSS制作个性化的按钮）

本文目录

• 如何用CSS制作个性化的按钮
• 使用jQuery编程实现：编写一个用户注册页面，需要输入用户名和输入2次密码，在点击“注册”按钮时
• 用CSS做一个按钮，怎么添加链接
• 如何给提交按钮做css样式

如何用CSS制作个性化的按钮

在网页中插入一个按钮很简单，只要在dreamweaver中点击插入按钮的图标就可以了，随后网页中会插入按钮的代码： 《input type="submit" name="Submit" value="提交" /》 这个按钮在页面中的样式是随windows的主题变化的，也就是windows的按钮默认样式。
***隐藏网址***

使用jQuery编程实现：编写一个用户注册页面，需要输入用户名和输入2次密码，在点击“注册”按钮时

《script type="text/javascript"》
//循环获取所有的input框
//定义全局变量
var NI=false;
var US=false;
var PS=false;
var RPS=false;
var EM=false;
var PH=false;
//给每个input绑定获取焦点事件
//昵称
$(’input’).focus(function(){
$(this).next().css({color:’#979898’,display:’block’});
$(this).next().html(’请输入常用昵称’);

});
//账户
$(’input’).focus(function(){
$(this).next().css({color:’#979898’,display:’block’});
$(this).next().html(’请输入6-16个字符,首字符不能为数字’);

});
//密码
$(’input’).focus(function(){
$(this).next().css({color:’#979898’,display:’block’});
$(this).next().html(’请输入6-16个字符,首字符不能为数字’);

});
//重复密码
$(’input’).focus(function(){
$(this).next().css({color:’#979898’,display:’block’});
$(this).next().html(’请再次输入密码’);

});
//邮箱
$(’input’).focus(function(){
$(this).next().css({color:’#979898’,display:’block’});
$(this).next().html(’请输入常用昵称’);

});
//电话
$(’input’).focus(function(){
$(this).next().css({color:’#979898’,display:’block’});
$(this).next().html(’请输入常用手机号码’);

});
//给每个input绑定丧失焦点事件
//昵称
$(’input’).blur(function(){
var v=$(this).val();
var reg=/^.{1,16}$/;
if(!reg.test(v)){
$(this).next().html(’✘输入有误,请重新输入’);
$(this).next().css(’color’,’red’);
}else{
$(this).next().html(’:check_mark:’);
$(this).next().css(’color’,’green’);
NI=true;
}
});
//账户
$(’input’).blur(function(){
var v=$(this).val();
var input=$(this);
var reg=/^\w{6,16}$/;
if(!reg.test(v)){
input.next().html(’✘输入有误,请重新输入’);
input.next().css(’color’,’red’);
}else{
//发送ajax判断账户是否可用
$.post(’{:U("Admin/Admin/select")}’,{username:v},function(data){
if(data==0){
input.next().html(’✘用户名已存在’);
input.next().css(’color’,’red’);
}else{
input.next().html(’:check_mark:’);
input.next().css(’color’,’green’);
US=true;
}
});
}
});
//密码
$(’input’).blur(function(){
var v=$(this).val();
var reg=/^{1}\w{5,15}$/;
if(!reg.test(v)){
$(this).next().html(’✘输入有误,请重新输入’);
$(this).next().css(’color’,’red’);
}else{
$(this).next().html(’:check_mark:’);
$(this).next().css(’color’,’green’);
PS=true;
}
});
//重复密码
$(’input’).blur(function(){
var rv=$(this).val();
var v=$(’input’).val();
if(rv !== v){
$(this).next().html(’✘重复密码输入有误’);
$(this).next().css(’color’,’red’);
}else{
$(this).next().html(’:check_mark:’);
$(this).next().css(’color’,’green’);
RPS=true;
}
});
//邮箱
$(’input’).blur(function(){
var v=$(this).val();
var reg = /^\w+@\w+\.(com|cn|com\.cn|org|hk|edu|net)$/;
if(!reg.test(v)){
$(this).next().html(’✘输入有误,请重新输入’);
$(this).next().css(’color’,’red’);
}else{
$(this).next().html(’:check_mark:’);
$(this).next().css(’color’,’green’);
EM=true;
}
});
//电话
$(’input’).blur(function(){
var v=$(this).val();
var reg=/^1\d{10}$/;
if(!reg.test(v)){
$(this).next().html(’✘输入有误,请重新输入’);
$(this).next().css(’color’,’red’);
}else{
$(this).next().html(’:check_mark:’);
$(this).next().css(’color’,’green’);
PH=true;
}
});
//绑定表单提交事件
$(’button’).click(function(){
//alert(’dasd’);
$("input").each(function(){
$(this).next().css(’display’,’block’); //循环让每个input框后面的span显示出来
});
//触发丧失焦点事件
$(’input’).trigger(’blur’);
$(’input’).trigger(’blur’);
$(’input’).trigger(’blur’);
$(’input’).trigger(’blur’);
$(’input’).trigger(’blur’);
$(’input’).trigger(’blur’);
if(NI && US && PS && RPS && EM && PH){
return true;
}
return false;
});
《/script》

用CSS做一个按钮，怎么添加链接

用CSS做一个按钮，添加链接，首先给这个按钮一个id或者是class，然后我们在通过css的width，height来改变这个按钮的默认宽度和高度，在用一个a标签将这个按钮包裹起来，就能实现链接的添加，通过代码来理解下：
《html》
《head》
《style》
#but{
widht:220px;
height:300px;
}
《/style》
《/head》

《body》
《a href=’地址’》
《input type=’button’ id=’but’ value=’我是一个链接’》
《/a》
《/body》
《/html》

如何给提交按钮做css样式

当按钮的 type="submit"（提交）和 type="reset"（重置）时，可以加背景、修饰边框，做任何想要的样式，但如果效果是没有边框，也就是要border:none时，其它浏览器中显示正常，但在IE6中也是不起作用的，还是会存在黑色边框。
　　解决此问题很简单，我们只需要把type设置成button，这样就是可以做到兼容各个浏览器了。
　　示例：《input type="button" name="button" id="button" value="提交" /》