ورود

View Full Version : سوال: رنگ بندی جالب !



sajedmalayeri
پنج شنبه 22 آبان 1393, 11:44 صبح
سلام دوستان
به این سایت برید .
http://www.learnblog.ir
قسمت ورود سمت راست صفحه ی دکمه داره روش نوشته ورود .
وقتی موس روی اون میره دو رنگ عوض میکنه !
چطوری اون افکت رو بدم ؟؟؟
اگه میشه کاملشو بزارید(html # css ) ممنون

amirtc
پنج شنبه 22 آبان 1393, 12:07 عصر
#theme-my-login input[type=text],#theme-my-login input[type=password]{
padding:10px 10px;
width:300px;
border-style: solid;
border-color: #DBDBDB;
background-color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: 5px;
position: relative;
border-width: 1px 5px;
}
#theme-my-login input[type=submit]{
padding:10px 50px 15px;
cursor:pointer;
border-style: solid;
border-color: #688E00;
background-color: #97C024;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: 5px;
position: relative;
border-width: 1px 5px;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#theme-my-login input[type=submit]:hover{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
border-color: #B22727;
background-color: #E83333;
}
#theme-my-login ul.tml-action-links li{
padding:5px 20px 8px;
cursor:pointer;
width:220px;
display:inline-table;
text-align:center;
border-style: solid;
border-color: #E6DB55;
background-color: #FFFFE0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: 5px;
position: relative;
border-width: 1px 5px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#theme-my-login ul.tml-action-links li:hover{
border-color: #54B0E5;
background-color: #6DC1F2;
}
#theme-my-login ul.tml-action-links li a{color:#000;}
/* ----------------------- */
#theme-my-login1 input[type=text],#theme-my-login1 input[type=password]{
padding:10px 10px;
width:280px;
border-style: solid;
border-color: #DBDBDB;
background-color: #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: 5px;
position: relative;
border-width: 1px 5px;
}
#theme-my-login1 input[type=submit]{
padding:8px 50px 11px;
width:100%;
cursor:pointer;
border-style: solid;
border-color: #688E00;
background-color: #97C024;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: 5px;
position: relative;
border-width: 1px 5px;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#theme-my-login1 input[type=submit]:hover{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
border-color: #B22727;
background-color: #E83333;
}
#theme-my-login1 ul.tml-action-links li{
padding:5px 0px 0px;
cursor:pointer;
width:141px;
display:inline-table;
text-align:center;
border-style: solid;
border-color: #E6DB55;
background-color: #FFFFE0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-top: 5px;
position: relative;
border-width: 1px 5px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#theme-my-login1 ul.tml-action-links li:hover{
border-color: #54B0E5;
background-color: #6DC1F2;
}
#theme-my-login1 ul.tml-action-links li a{color:#000;}



<form name="loginform" id="loginform1" action="http://www.learnblog.ir/?instance=1" method="post"> <p> <label for="user_login1">نام‌کاربری</label> <input type="text" name="log" id="user_login1" class="input" value="" size="20"> </p> <p> <label for="user_pass1">رمز</label> <input type="password" name="pwd" id="user_pass1" class="input" value="" size="20"> </p>
<input type="hidden" name="_wp_original_http_referer" value="">
<p class="forgetmenot"> <input name="rememberme" type="checkbox" id="rememberme1" value="forever"> <label for="rememberme1">مرا به خاطر بسپار</label> </p> <p class="submit"> <input type="submit" name="wp-submit" id="wp-submit1" value="ورود"> <input type="hidden" name="redirect_to" value="http://www.learnblog.ir/wp-admin/"> <input type="hidden" name="instance" value="1"> <input type="hidden" name="action" value="login"> </p> </form>
چیز خاصی نداره از خاصیت transition استفاده کرده .

sajedmalayeri
پنج شنبه 22 آبان 1393, 12:10 عصر
نشد داداش :(

amirtc
پنج شنبه 22 آبان 1393, 12:16 عصر
باید کار با فرم ها وباتون هارو بلد باشید !

sajedmalayeri
پنج شنبه 22 آبان 1393, 12:30 عصر
درست شد :لبخند:

saeed410
پنج شنبه 22 آبان 1393, 17:22 عصر
jQuery , css3,html5 میتونی این کارو بکنی. جستجو button effect +html5+jquery+css

sadegh-sj76
پنج شنبه 22 آبان 1393, 20:37 عصر
سلام. کافیه خاصیت transition:1500; رو توی css به دکمه اضافه کنی. زمانش رو هم هرچی که خواستی بذار:چشمک: