سایت CSS-Tricks در فوتر خود از یک افکت جالب برای آیکون های موجود در آن استفاده کرده که با قرار گرفتن موس روی آنها به شکل زیبایی رنگ و طرحشان عوض میشود! در این مطلب قصد دارم تا نوع ساده ای از این افکت را به شما آموزش دهم که با استفاده از CSS3 میتوان آن را ایجاد کرد.

از این افکت می توانید در زیباتر کردن آیکون های سایت، تصاویر و… استفاده کنید. امیدوارم قسمت پنجم این مجموعه مقالات نیز برای شما مفید باشد. برای خواندن آموزش به ادامه مطلب مراجعه کنید.

ابتدا لینک و متن های مورد نظر را به صورت زیر ایجاد میکنیم :

<a href="#">
<h3>Panel Title</h3>
<p>Additional information about the panel goes in a paragraph here</p>
</a>

در مرحله بعد به دکمه یا همان لینک ایجاد شده استایل میدهیم. به صورت زیر :

.hover-panel {
background-color: #E6E2DF;
color: #B2AAA4;
float: left;
height: 130px;
width: 262px;
margin: 0 10px 10px 0;
padding: 15px;
}
.hover-panel h3 {
font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
font-size: 38px;
line-height: 1;
margin: 0 0 10px;
text-transform: uppercase;
}
.hover-panel p {
font-size: 12px;
width: 65%;
}

کدهای بالا استایل حالت اولیه دکمه است. در ادامه استایل حالت دوم یا Hover را اضافه میکنیم :

.hover-panel:hover {
background-color: #237ABE;
}
.hover-panel:hover h3 {
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}
.hover-panel:hover p {
color: #FFF:
}

حالا پس زمینه دکمه را با استفاده از کدهای زیر ایجاد میکنیم :

.hover-panel {
background-image: url(hover-panel-icon.png);
background-position: 292px 10px;
background-repeat: no-repeat;
}
.hover-panel:hover {
background-position: 180px 10px;
}

در مراحل بالا استایل اصلی دکمه را ایجاد کردیم . حالا باید حالت Transition را به آن اضافه کنیم.

با اضافه کردن کدهای زیر، حالت Transition ایجاد میشود.

.hover-panel {
-moz-transition: all 0.2s ease; /* FF3.7+ */
-o-transition: all 0.2s ease; /* Opera 10.5 */
-webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
transition: all 0.2s ease;
}

کد CSS پایانی به صورت زیر میشود :

.hover-panel {
background-color: #E6E2DF;
background-image: url(hover-panel-icon.png);
background-position: 292px 10px;
background-repeat: no-repeat;
color: #B2AAA4;
display: block;
float: left;
height: 130px;
width: 262px;
margin: 0 10px 10px 0;
padding: 15px;
-moz-transition: all 0.2s ease; /* FF3.7+ */
-o-transition: all 0.2s ease; /* Opera 10.5 */
-webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
transition: all 0.2s ease;
}
.hover-panel h3 {
font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
font-size: 38px;
line-height: 1;
margin: 0 0 10px;
text-transform: uppercase;
}
.hover-panel p {
font-size: 12px;
width: 65%;
}
.hover-panel:hover {
background-color: #237ABE;
background-position: 180px 10px;
}
.hover-panel:hover h3 {
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}
.hover-panel:hover p {
color: #FFF:
}

فایل آماده این دکمه را میتوانید دانلود کنید.