کد آماده نمایش ایمیل بصورت فلت

سلام دوستان.

با پست کد آماده نمایش ایمیل بصورت فلت در خدمتتونیم.

خب در واقع شاید شما لازم باشید که ایمیل یا هر متن دیگه ای رو توی یه کادر زیبا و با افکت های قشنگ نمایش بدید.

خب ، ما اونو براتون حاضر کردیم 🙂

 

ویژگی کد

  • رنگبندی کاملا فلت
  • افکت های جذاب
  • افکت روان ماوس
  • استفاده از فونت وب زیبا
  • سبک و استاندارد

 

مشاهده دمو کد

 

استایل کد

.mail-back {background: #bdc3c7;width: 300px;height: 40px;border-radius: 30px;border-bottom: 5px #c0392b solid;font-size: 19px;font-family: 'Titillium Web', sans-serif;text-align: center;padding-top: 10px;overflow: hidden;transition: 0.3s;}

.mail-back span {background: #c0392b;color: #fff;padding-left: 4px;padding-top: 10px;padding-bottom: 50px;border-radius: 10px;transition: 0.5s;}
.mail-back:hover span {padding-top: 0px;padding-bottom: 2px;}
.mail-back:hover {background:#f1c40f;border-bottom: 5px #f39c12 solid;}

 

اچ تی ام ال کد
و این کد رو هم هرجایی که میخاین نشون داده بشه و به جای yourmailhere ایمیلتون رو قرار بدید و بجای yahoo.com هم سرویس ایمیلتون.
<div class="mail-back">

yourmail here

<span> @ </span>

yahoo.com
</div>

وب فونت کد:

باید این کد رو بین تگ های <head> و </head> قرار بدید تا فونت کد تنظیم بشه.

فونت از فونت وب های گوگل هستش و سرعتش بالاست پس نگران کاهش سرعت سایت نباشید.

<link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>

 

کد آماده نمایش ایمیل بصورت فلت

حتما ببینید:   معرفی و آموزش transition در css
اشتراک این مطلب در تلگرام.

نظر شما چیه؟