CSS+JS实现的漂亮圆角按钮_表单按钮特效

一组用CSS+JS实现的漂亮圆角按钮，看着五颜六色，代码中用到的JS文件，你可将其另存，这样方便调用，也不影响网页体积。你可以运行后点击鼠标右键保存图片，知道了思路你就可以举一反三了，绝对很实用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>CSS美化的按钮</title>
  <meta http-equiv="mrc-type" mrc="text/html; charset=gbk">
<script type="text/javascript">
var btn = {
    init : function() {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        as = btn.getElementsByClassName('btn(.*)');
        for (i=0; i<as.length; i++) {
            if ( as[i].tagName == "INPUT" && ( as[i].type.toLowerCase() == "submit" || as[i].type.toLowerCase() == "button" ) ) {
                var a1 = document.createElement("a");
                a1.appendChild(document.createTextNode(as[i].value));
                a1.className = as[i].className;
                a1.id = as[i].id;
                as[i] = as[i].parentNode.replaceChild(a1, as[i]);
                as[i] = a1;
                as[i].style.cursor = "pointer";
            }
            else if (as[i].tagName == "A") {
                var tt = as[i].childNodes;
            }
            else { return false };
            var i1 = document.createElement('i');
            var i2 = document.createElement('i');
            var s1 = document.createElement('span');
            var s2 = document.createElement('span');
            s1.appendChild(i1);
            s1.appendChild(s2);
            while (as[i].firstChild) {
              s1.appendChild(as[i].firstChild);
            }
            as[i].appendChild(s1);
            as[i] = as[i].insertBefore(i2, s1);
        }
        // The following lines submits the form if the button id is "submit_btn"
        btn.addEvent(document.getElementById('submit_btn'),'click',function() {
            var form = btn.findForm(this);
            form.submit();
        });
        // The following lines resets the form if the button id is "reset_btn"
        btn.addEvent(document.getElementById('reset_btn'),'click',function() {
            var form = btn.findForm(this);
            form.reset();
        });
    },
    findForm : function(f) {
        while(f.tagName != "FORM") {
            f = f.parentNode;
        }
        return f;
    },
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    },
    getElementsByClassName : function(className, tag, elm) {
        var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
        var tag = tag || "*";
        var elm = elm || document;
        var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elements.length;
        for(var i=0; i<length; i++){
            current = elements[i];
            if(testClass.test(current.className)){
                returnElements.push(current);
            }
        }
        return returnElements;
    }
}

btn.addEvent(window,'load', function() { btn.init();} );
</script>
<style type="text/css" media="screen">
body { padding: 20px; font-size: 0.85em; font-family: georgia, serif; }
.btn { display: block; position: relative; background: #aaa; padding: 5px; float: left; color: #fff; text-decoration: none; cursor: pointer; }
.btn * { font-style: normal; background-image: url(/jscss/demoimg/200903/btn2.png); background-repeat: no-repeat; display: block; position: relative; }
.btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
.btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
.btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
.btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }

* html .btn span,
* html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }

.btn.blue { background: #2ae; }
.btn.green { background: #9d4; }
.btn.pink { background: #e1a; }
.btn:hover { background-color: #a00; }
.btn:active { background-color: #444; }
.btn[class] {  background-image: url(/jscss/demoimg/200903/shade.png); background-position: bottom; }

* html .btn { border: 3px double #aaa; }
* html .btn.blue { border-color: #2ae; }
* html .btn.green { border-color: #9d4; }
* html .btn.pink { border-color: #e1a; }
* html .btn:hover { border-color: #a00; }

p { clear: both; padding-bottom: 2em; }
form { margin-top: 2em; }
form p .btn { margin-right: 1em; }
textarea { margin: 1em 0;}
  </style>
</head>
<body>

<h2>CSS 圆角Buttons 演示：</h2>
<p><a href="www.mb5u.com" class="btn blue">This is a blue button</a></p>
<p><a href="/" class="btn green">This should be a green button</a></p>
<p><big><a href="www.mb5u.com" class="btn blue big">Big Text</a></big></p>
<p><big style="font-size: 180%;"><a href="#" class="btn pink">Bigger Text</a></big></p>
<form method="post" action="#" id="form_id">
<fieldset>
<legend>表单示例：</legend>
<div><input type="text" /></div>
<div><textarea cols="40" rows="10"></textarea></div>
<p><input type="Button" id="reset_btn" value="Reset" class="btn" /> <input type="Submit" id="submit_btn" value="Submit this form" class="btn pink" /></p>
</fieldset>
</form>
</body>
</html>

所属频道：表单按钮特效/更新时间：2013-01-13

[收藏][报错][返回列表]

CSS+JS实现的漂亮圆角按钮_表单按钮特效

表单按钮特效Rss订阅特效代码搜索

表单按钮特效推荐

猜你也喜欢看这些