Форум Сайтостроение Веб-строительство

Кнопка CSS

[Удален]
625

Здравствуйте ув. форумчане!

Стоит форма входа на сайт, вместо неё хочу сделать кнопку с картинкой от кнопки "вход" .

../images/loginbtn.png

<div class="loginbox">{login}</div>

/*---login---*/
.loginbox {
display: inline;
}

.loginbox ul.loginbox {
margin-top: 30px;
float: right;
height: 26px;
}

ul.loginbox li {
margin-left: 10px;
line-height: 23px;
}

.loginbtn a {
color: #151e05;
text-shadow: 0 1px 0 #c0ea78;
text-decoration: none;
display: block;
width: 61px;
height: 26px;
text-align: center;
background: url("../images/loginbtn.png") no-repeat;
}

.loginbtn a:hover {
background-position: 0 -26px;
}

.logform li.lfield {
margin-bottom: 10px;
}

.logform li.lbtn {
text-align: center;
}

.logform li.lfield input {
width: 265px;
}

.logform li.lfchek input {
width: 13px;
border: none;
background: none;
}

.logform li.lfchek label {
display: inline;
margin-bottom: 0.2em;
}

Пробовал делать так:

<div class="knonka">Текст</div>

.knonka {
color: #151e05;
text-shadow: 0 1px 0 #c0ea78;
text-decoration: none;
display: block;
width: 61px;
height: 26px;
text-align: center;
background: url("../images/loginbtn.png") no-repeat;
margin-left: 10px;
line-height: 23px;
}

Не получилось, стоит не там где стояла форма.

В CSS Не силен, help!

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#1

Если нужно кнопку в центре разместить:

вместо margin-left: 10px; напишите margin: 50% auto;

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
TaediumVitae
На сайте с 22.09.2011
Offline
41
TaediumVitae
#2

дани мапов, а зачем сверху/снизу отступы в 50%?

[Удален]
#3
дани мапов:
Если нужно кнопку в центре разместить:
вместо margin-left: 10px; напишите margin: 50% auto;

Не помогло... с margin: 50% auto ломает шаблон, а с margin: auto кнопка чуть отъела вправо, но не встала на место...

Geers
На сайте с 12.04.2011
Offline
487
Geers
#4
Xnokie1:
Не помогло... с margin: 50% auto ломает шаблон, а с margin: auto кнопка чуть отъела вправо, но не встала на место...

Должен быть не margin, а padding.

Покажите рисунок самой кнопки, может там и все с помощью css можно сделать, без графики.

website
На сайте с 25.02.2011
Offline
30
website
#5

Держи отличный вариант кнопки сделанной на чистом CSS: 

 <STYLE TYPE="text/css">

.button-green{

-moz-box-shadow:inset 0px 1px 0px 0px #51ad6b;

-webkit-box-shadow:inset 0px 1px 0px 0px #51ad6b;box-shadow:inset 0px 1px 0px 0px #51ad6b;

background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#1a923c),color-stop(1,#055c1e) );

background:-moz-linear-gradient( center top,#1a923c 5%,#055c1e 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a923c',endColorstr='#055c1e');

background-color:#1a923c;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #055c1e;

display:inline-block;

color:#fff;

font-family:arial;font-size:12px;

font-weight:bold;

padding:7px 12px;

text-decoration:none;

text-shadow:1px 1px 0px #0d6123}.button-green:hover{color:#fff;color:rgba(255,255,255,0.8);

text-decoration:none;background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#055c1e),color-stop(1,#1a923c) );

background:-moz-linear-gradient( center top,#055c1e 5%,#1a923c 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#055c1e',endColorstr='#1a923c');

background-color:#055c1e

}



.button-green:active{

position:relative;

top:1px;

color:#fff

}



.button-green:hover img{

opacity:0.8

}

  </STYLE>





  <div class="button-green">Текст</div>
И дай вам Бог того вдвойне, чего желаете вы мне!
TaediumVitae
На сайте с 22.09.2011
Offline
41
TaediumVitae
#6

Xnokie1, просто скажите, где её, собственно, место.

[Удален]
#7
TaediumVitae:
Xnokie1, просто скажите, где её, собственно, место.

Там же где и .loginbox

TaediumVitae
На сайте с 22.09.2011
Offline
41
TaediumVitae
#8

А где место .loginbox?:)

Из того, что вы привели в первом посте, ясно только то, что .loginbox - это инлайн-элемент, и поведение его предсказать трудно.

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