سلام هی یاد قدیما افتادیم ....
یادش بخیر !
استایل :
.box {
color: white;
width: 45em;
height: 13em;
background: tomato;
position: relative;
overflow: hidden;
margin: 2.5em auto;
font-family: 'PT Sans';
box-shadow: .35em .35em 0 0 #000;
}
.left {
padding: 3em;
height: 100%;
width: 100%;
}
.left h1 {
margin: 0;
font-weight: 700;
text-transform: uppercase;
}
.left p {
font-size: 1.2em;
width: 18em;
margin: 0;
}
.right {
height: 100%;
width: 100%;
background: #383838;
position: absolute;
top: 0;
left: 28em;
transition: 0.25s;
}
.right::before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 13em 3em 0 0;
border-color: transparent #383838 transparent transparent;
left: -3em;
top: 0;
position: absolute;
}
.right:hover {
transition: 0.25s;
transform: translateX(-28em);
}
.right:hover a {
transition: 0.25s;
transform: translateX(0) scale(1.5);
}
.right:hover a::before {
width: 4.9em;
}
.right a {
font-weight: 700;
text-decoration: none;
color: white;
text-align: center;
display: block;
font-size: 2.1em;
transform: translateX(-6.75em);
transition: 0.25s;
position: relative;
line-height: 6.5em;
text-transform: uppercase;
}
.right a::after {
content: '';
height: .09em;
position: absolute;
background: white;
bottom: 4em;
left: 7.75em;
transition: 0.25s;
width: 0;
}
.right a::before {
content: '';
height: .1em;
width: 0;
position: absolute;
background: white;
bottom: 2.5em;
transition: 0.25s;
}
.right a:hover::before, .right a:hover::after {
width: 6em;
transition: 0.25s;
}
کد ابزار :
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<div class="box">
<div class="left">
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit nobis dolore sunt saepe reiciendis quo.</p>
</div>
<div class="right">
<a href="#">Contact us!</a>
</div>
</div>
