CSS

Pasha199
На сайте с 17.02.2009
Offline
167
324

Как заменить обычную кнопку

<button class="submit" type="submit">Отправить</button>
на кнопку CSS3.

CSS

.pricing-table .zakaz{width:80px;height:20px;position: relative;padding: 10px 45px;color: #fff;font: bold 17px Verdana;text-transform: none;text-decoration: none;display: inline-block;background-color: #72ce3f;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;text-shadow: 0 -1px 0 rgba(0,0,0,.15);opacity: .9;margin: 0px 0px 0px 25px;}
.pricing-table .zakaz:hover{opacity: 1;}
.pricing-table .zakaz:active{-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;}
.pricing-table .site-vizit .zakaz{background-color: #f56e15;background-image: url(../images/22.png);background-repeat: no-repeat;background-position: 15px 14px;}

HTML

<div class="pricing-table">
<div class="site-vizit">
<a class="zakaz" title='Заказать разработку сайта' href="#">Заказать</a>
</div >
</div>
uberchel
На сайте с 16.01.2010
Offline
70
#1

Первый вариант:


.pricing-table .zakaz{width:80px;height:20px;position: relative;padding: 10px 45px;color: #fff;font: bold 17px Verdana;text-transform: none;text-decoration: none;display: inline-block;background-color: #72ce3f;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;text-shadow: 0 -1px 0 rgba(0,0,0,.15);opacity: .9;margin: 0px 0px 0px 25px;}
.pricing-table .zakaz:hover{opacity: 1;}
.pricing-table .zakaz:active{-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;}
.pricing-table .site-vizit .zakaz{background-color: #f56e15;background-image: url(../images/22.png);background-repeat: no-repeat;background-position: 15px 14px;}
#submit { display:none; }


<div class="pricing-table">
<div class="site-vizit">
<input id="submit" type="submit" onclick="alert('');" value="">
<a class="zakaz" title='Заказать разработку сайта' href="javascript://" onclick="submit.click();">Заказать</a>
</div >

Второй, к тегу form добавить атрибут с id, допустим id="subform":


.pricing-table .zakaz{width:80px;height:20px;position: relative;padding: 10px 45px;color: #fff;font: bold 17px Verdana;text-transform: none;text-decoration: none;display: inline-block;background-color: #72ce3f;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;text-shadow: 0 -1px 0 rgba(0,0,0,.15);opacity: .9;margin: 0px 0px 0px 25px;}
.pricing-table .zakaz:hover{opacity: 1;}
.pricing-table .zakaz:active{-moz-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;}
.pricing-table .site-vizit .zakaz{background-color: #f56e15;background-image: url(../images/22.png);background-repeat: no-repeat;background-position: 15px 14px;}
#submit { display:none; }


<form id="subform" method="post" onsubmit="alert('');">
<div class="pricing-table">
<div class="site-vizit">
<a class="zakaz" title='Заказать разработку сайта' href="javascript://" onclick="subform.onsubmit();">Заказать</a>
</div >
</form>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий