دکمه دانلود زیبا با CSS3

بازدید38.5kپست ها2آخرین فعالیت6 سال پیش
0
0

[align=center][ATTACH=CONFIG]499[/ATTACH]
[/align]

<!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=" http://www.softafzar.net/"> Source Files</a> </span>

</body>

</html>
0

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

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.