<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>لینکهایبسیارپیشرفتهبااستفادهازCSS</title>
<link href="https://fonts.googleapis.com/css?family=Maven+Pro|Yrsa"rel="stylesheet">
</head>
<style>
.draw-outline {
display:inline-block;
padding:16px28px;
border:2pxblacksolid;
text-align:center;
text-decoration:none;
color:black;
position:relative;
transition:border-color0.35sease-in-out;
z-index:1;
}
.draw-outline:before, .draw-outline:after {
content:'';
position:absolute;
width:0px;
height:0px;
box-sizing:content-box;
z-index:-1;
transition:-webkit-transform0.25sease-in-out;
transition:transform0.25sease-in-out;
transition:transform0.25sease-in-out,-webkit-transform0.25sease-in-out;
padding-left:2px;
}
.draw-outline:before {
top:-2px;
left:-2px;
border-top:2pxtransparentsolid;
border-right:2pxtransparentsolid;
}
.draw-outline:after {
bottom:-2px;
right:-2px;
border-bottom:2pxtransparentsolid;
border-left:2pxtransparentsolid;
}
.draw-outline:hover {
color:#37b2b2;
transition:color0.35sease-in-out,border-color0.35sease-in-out;
border-color:black;
-webkit-animation:outline-reset0.35s1forwards;
animation:outline-reset0.35s1forwards;
}
.draw-outline:hover:before {
-webkit-animation:top-right-border0.75s10.35sforwards;
animation:top-right-border0.75s10.35sforwards;
}
.draw-outline:hover:after {
-webkit-animation:bottom-left-border0.75s11.1sforwards;
animation:bottom-left-border0.75s11.1sforwards;
}
.draw-outline--tandem:hover:after {
-webkit-animation:bottom-left-border0.75s10.35sforwards;
animation:bottom-left-border0.75s10.35sforwards;
}
.draw-outline:active:before, .draw-outline:active:after {
-webkit-transform:scale(1.05);
transform:scale(1.05);
}
@-webkit-keyframes outline-reset {
0% {
border-color:black;
}
100% {
border-color:transparent;
}
}
@keyframes outline-reset {
0% {
border-color:black;
}
100% {
border-color:transparent;
}
}
@-webkit-keyframes top-right-border {
0% {
border-color:#37b2b2;
width:0px;
height:0;
}
50% {
width:100%;
height:0;
}
100% {
border-color:#37b2b2;
width:100%;
height:100%;
}
}
@keyframes top-right-border {
0% {
border-color:#37b2b2;
width:0px;
height:0;
}
50% {
width:100%;
height:0;
}
100% {
border-color:#37b2b2;
width:100%;
height:100%;
}
}
@-webkit-keyframes bottom-left-border {
0% {
border-color:#37b2b2;
width:0px;
height:0;
}
50% {
width:100%;
height:0;
}
100% {
border-color:#37b2b2;
width:100%;
height:100%;
}
}
@keyframes bottom-left-border {
0% {
border-color:#37b2b2;
width:0px;
height:0;
}
50% {
width:100%;
height:0;
}
100% {
border-color:#37b2b2;
width:100%;
height:100%;
}
}
.swipe-fill {
display:inline-block;
padding:16px28px;
border:2pxblacksolid;
text-align:center;
text-decoration:none;
color:black;
background:white;
position:relative;
overflow:hidden;
transition:color0.25sease-in-out,border-color0.25sease-in-out;
z-index:1;
border-radius:0px;
}
.swipe-fill:before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#666;
transition:-webkit-transform0.25sease-in-out;
transition:transform0.25sease-in-out;
transition:transform0.25sease-in-out,-webkit-transform0.25sease-in-out;
z-index:-1;
}
.swipe-fill--up:before {
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
}
.swipe-fill--down:before {
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
}
.swipe-fill--left:before {
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}
.swipe-fill--right:before {
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0);
}
.swipe-fill:hover {
color:white;
border:2pxblacksolid;
}
.swipe-fill:hover:before {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
.box-fill {
display:inline-block;
padding:16px28px;
border:2pxblacksolid;
text-align:center;
text-decoration:none;
color:black;
position:relative;
overflow:hidden;
background:white;
transition:color0.35sease-in-out;
z-index:1;
border-radius:0px;
}
.box-fill:before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#666;
transition:opacity0.35sease-in-out,-webkit-transform0.35sease-in-out;
transition:transform0.35sease-in-out,opacity0.35sease-in-out;
transition:transform0.35sease-in-out,opacity0.35sease-in-out,-webkit-transform0.35sease-in-out;
-webkit-transform:scale(0);
transform:scale(0);
z-index:-1;
opacity:0;
}
.box-fill:hover {
color:white;
}
.box-fill:hover:before {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
}
.box-fill--out {
color:white;
}
.box-fill--out:before {
-webkit-transform:scale(1);
transform:scale(1);
opacity:1;
}
.box-fill--out:hover {
color:black;
}
.box-fill--out:hover:before {
-webkit-transform:scale(0);
transform:scale(0);
opacity:0;
}
.cross-fade {
display:inline-block;
padding:16px28px;
border:2pxblacksolid;
text-align:center;
text-decoration:none;
color:black;
position:relative;
overflow:hidden;
transition:color0.75sease-in-out;
z-index:1;
border-radius:0px;
}
.cross-fade:before, .cross-fade:after {
content:'';
position:absolute;
top:0;
left:-25%;
width:150%;
height:100%;
background:rgba(102,102,102,0.5);
transition:-webkit-transform0.75sease-in-out;
transition:transform0.75sease-in-out;
transition:transform0.75sease-in-out,-webkit-transform0.75sease-in-out;
z-index:-1;
}
.cross-fade:before {
-webkit-transform:translate3d(100%,0,0)skew(20deg);
transform:translate3d(100%,0,0)skew(20deg);
-webkit-transform-origin:00;
transform-origin:00;
}
.cross-fade:after {
-webkit-transform:translate3d(-100%,0,0)skew(20deg);
transform:translate3d(-100%,0,0)skew(20deg);
-webkit-transform-origin:100%100%;
transform-origin:100%100%;
}
.cross-fade:hover {
color:white;
}
.cross-fade:hover:before, .cross-fade:hover:after {
-webkit-transform:translate3d(0,0,0)skew(20deg);
transform:translate3d(0,0,0)skew(20deg);
}
a:not([class]) {
text-shadow:white1px0px0px,white0.540302px0.841471px0px,white-0.416147px0.909297px0px,white-0.989992px0.14112px0px,white-0.653644px-0.756802px0px,white0.283662px-0.958924px0px,white0.96017px-0.279415px0px;
text-decoration:none;
background-image:linear-gradient(#37b2b250%,#37b2b250%);
background-size:10000px1px;
color:#37b2b2;
background-repeat:no-repeat;
background-position:01em;
background-position:-10000px1em;
}
a:not([class]):hover {
background-position:01em;
transition:background-position2sease-in-out;
}
body {
font-family:sans-serif;
max-width:1000px;
margin:0auto;
padding:30px;
font-family:'Maven Pro',sans-serif;
text-align:center;
}
h1 {
font-size:2.8rem;
}
h2 {
font-size:2rem;
}
h1, h2 {
font-family:'Yrsa',cursive;
}
p {
font-size:1.25rem;
line-height:1.75rem;
}
hr {
margin:40pxauto;
max-width:100px;
display:block;
height:1px;
border:0;
border-top:1pxsolid#ccc;
padding:0;
}
.pen-intro {
text-align:center;
}
.button-container a {
margin:010px;
}
</style>
<body>
<header class="pen-intro">
<h1 dir='rtl'>لینکهایبسیارپیشرفتهبااستفادهازCSS</h1>
<pdir='rtl'>لینکهاییکهمیبینیدبهزیباییهرچهتمامتروبااستفادهازCSSطراحیشدهاند.هیچکدجاوااسکریپتیدرطراحیآنهابهکاربردهنشدهاستوهمینموضوعجذابیتآنرادوچندانمیکند</p>
</header>
<hr/>
<div class="button-container">
<h2>Draw Outline</h2>
<ahref="#"class="draw-outline">Single Outline</a>
<ahref="#"class="draw-outline draw-outline--tandem">Tandem Outline</a>
</div>
<hr/>
<div class="button-container">
<h2>Swipe Fill</h2>
<ahref="#"class="swipe-fill swipe-fill--up">Swipe Fill Up</a>
<ahref="#"class="swipe-fill swipe-fill--down">Swipe Fill Down</a>
<ahref="#"class="swipe-fill swipe-fill--left">Swipe Fill Left</a>
<ahref="#"class="swipe-fill swipe-fill--right">Swipe Fill Right</a>
</div>
<hr/>
<div class="button-container">
<h2>Box Fill</h2>
<ahref="#"class="box-fill">Box Fill In</a>
<ahref="#"class="box-fill box-fill--out">Box Fill Out</a>
</div>
<hr/>
<div class="button-container">
<h2>Cross Fade</h2>
<ahref="#"class="cross-fade">Button One</a>
</div>
<hr/>
</body>
</html>
چطور از فشرده ساز Winrar استفاده کنیم؟