کانال ما در تلگرام
دکمه صورتی چشمک زن برای سایت و بلاگ

دکمه زیبا برای سایت

اگه دوست دارید درون وب خود از دکمه جالبی که خاصیت hover  داشته باشه استفاده کنید میتونید از این کد استفاده نمایید. کد فوق را میتوانید به هر رنگی که دوست داشتید تغییر دهید و یا سرعت نورش در حالت هاور و ... را تغییر دهید. منتظر چه هستید!؟ به ادامه مقاله مراجعه کنید.

دکمه زیبا برای سایت

جهت استفاده از کد دکمه صورتی چشمک زن مراحل زیر را انجام دهید.

در فایل css قالب خودتون قرار بدید :

 body {   font: 16px 'Helvetica Neue';   color: #555;    padding: 1em; } h1 {   font: 2.5em bold 'Georgia', serif;   color: #222;   text-shadow: 0px 1px #fff;   margin-bottom: 1em; } p { margin-bottom: 5em; }  .container {  width: 640px;  margin: 2em auto;  text-align: center; }  /* button */  .button {   padding: .8em 1em;   color: #fdfdfd;   text-decoration: none;   display: inline-block;   border:  1px solid #b3005c;   -webkit-border-radius: 3px;   -moz-border-radius: 3px;   border-radius: 3px;   text-shadow: 0 1px 0 #800042;   background: #ffbcdc;   background: -moz-linear-gradient(top, #ffbcdc 0%, #ff4ca8 2%, #ff0084 2%, #ff0084 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbcdc), color-stop(2%,#ff4ca8), color-stop(2%,#ff0084), color-stop(100%,#ff0084));   background: -webkit-linear-gradient(top, #ffbcdc 0%,#ff4ca8 2%,#ff0084 2%,#ff0084 100%);   background: -o-linear-gradient(top, #ffbcdc 0%,#ff4ca8 2%,#ff0084 2%,#ff0084 100%);   background: -ms-linear-gradient(top, #ffbcdc 0%,#ff4ca8 2%,#ff0084 2%,#ff0084 100%);   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbcdc', endColorstr='#ff0084',GradientType=0 );   background: linear-gradient(top, #ffbcdc 0%,#ff4ca8 2%,#ff0084 2%,#ff0084 100%); }  .button:before {   content: "2665  "; }  /* animations */  @-webkit-keyframes resize {     100% {         -webkit-box-shadow: 0 0 50px #ff0084;         color: #fff;     } } @-moz-keyframes resize {     100% {         -moz-box-shadow: 0 0 50px #ff0084;         color: #fff;     } }  @-ms-keyframes resize {     100% {         box-shadow: 0 0 50px #ff0084;         color: #fff;     } } @keyframes resize {     100% {         box-shadow: 0 0 50px #ff0084;         color: #fff;     } }     .button:hover {     -webkit-animation: resize .5s ease-in-out infinite alternate;     -moz-animation: resize .5s ease-in-out infinite alternate;     -ms-animation: resize .5s ease-in-out infinite alternate;     animation: resize .5s ease-in-out infinite alternate; }  .button.normal:hover {   -webkit-animation-direction: normal;   -moz-animation-direction: normal;   -ms-animation-direction: normal;   animation-direction: normal; } 

 

 جایی که میخواهید این دکمه نمایش داده شود قرار دهید :

 

 <div class="container">    <p>        <a id="button" class="button" href="#">نوشته شما روی دکمه</a>    </p>       <p>        <a id="button" class="button normal" href="http://www.sepahna.ir">اینم شبیه همونه با این تفاوت که سریعتر چشمک میزنه</a>    </p></div>

 

0
نام:*
ایمیل:


جستجو در سایت
برند مورد علاقه شما
تقویم سایت
<    «  مهر 1399  »    >
شیدسچپج
 1234
567891011
12131415161718
19202122232425
2627282930