دکمه دانلود زیبا با CSS3
#1
Note 
[ATTACH=CONFIG]499[/ATTACH]
[HTML]
<!DOCTYPE html>
<html>
<head>
<style>
body {padding: 25% 0%}
.simple {
background: #e55656;
cursor:pointer;
display:block;
font-family: sans-serif;
font-size: 1.5em;
padding:1em;
margin:0 auto;
text-align: center;
text-shadow: 0px 1px 2px black;
box-shadow: 1px 1px 2px gray;
/* The importat code ;D */
box-sizing: border-box;
position: relative;
width:300px;ç

}
.simple a {
color: White;
text-decoration:none;
}
.simple:before, .simple:after {
color: White;
transition: all 1.2s ease;
position:absolute;
overflow:hidden;
background: #3488c2 ;
padding: 1em 0em;
top:0;
}
.simple:before {
text-align: right;
content: 'Down';
width:50%;
left:0;
}
.simple:after {
text-align: left;
content: 'load';
width:50%;
right:0;
}
.simple:hover:before, .simple:hover:after {
width:25%;
color: black;
}
</style>
</head>
<body>

<span class="simple" > <a href=" "> Source Files</a> </span>

</body>

</html>
[/HTML]

پاسخ
#2
Note 
خیلی خیلی زیباست
ممنون علیرضای عزیز :44:

پاسخ
#3
Note 
دمو : Edit fiddle - JSFiddle

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  سوال مشکل نمایش در منو زیر مجموعه سطح چهارم blackwizard 0 121 30-06-2016 ساعت 19:27
آخرین ارسال: blackwizard
Note 7 افکت بسیار زیبای CSS THE KNIGHT 2 785 26-09-2014 ساعت 16:09
آخرین ارسال: saber2
Note افکت زیبا برای ساخت دکمه در css WWWorker 0 345 20-09-2014 ساعت 21:12
آخرین ارسال: WWWorker
Note دانلود لودینگ های بسیار زیبا (CSS) WWWorker 3 724 23-08-2014 ساعت 19:08
آخرین ارسال: a.z.n
Note Tooltip زیبا با CSS Daniel 1 440 09-01-2014 ساعت 11:56
آخرین ارسال: AnimeIraN
Note CSS: کلید زیبای روشن و خاموش SOFTAFZAR 3 654 05-08-2013 ساعت 13:52
آخرین ارسال: SOFTAFZAR
Note افکت های زیبای CSS SOFTAFZAR 0 694 11-01-2013 ساعت 19:11
آخرین ارسال: SOFTAFZAR
Note تکنولوژی CSS3 WP Fox Pro 0 372 09-12-2012 ساعت 14:49
آخرین ارسال: WP Fox Pro

کاربرانِ درحال بازدید از این موضوع:   1 مهمان