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

CSS

توسط daniel در 5 سال پیش
0 968 2 4 سال پیش
danielanimeiranphp-sec
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:

خوش آمدید

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

لطفا ابتدا لاگین کنید