سلام به همه دوستان .امیدوارم تا الان سیزده خوبی بدر کرده باشین البته توی خونه هاتون.
امروز هم طبق روال همیشه یه ترفند باحال آوردم که میتونید توی طراحیاتون ازش استفاده کنید
آماده اید بریم سراغ کد ها ؟
کد های HTML :
<body> <a href="#"> <span></span> <span></span> <span></span> <span></span> دکمه نئون </a> </body>
خب فک میکنم کدای HTMLش راحت بوده باشه براتون .
اما اصل کار توی کد های CSS اونه .
کد های CSS :
@font-face{ font-family: "IYMed" font-weight: 400; font-style: normal; src: url('./IYMed.woff') format('woff')/* Safari, Android, iOS */ } // برای فونت میتونید اینجا هر فونتی که مد نظر خودتونه استفاده کنید body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #031321; font-family: 'IYMed'; } a{ position: relative; display: inline-block; padding: 15px 30px; color: #2196f3; text-transform: uppercase; text-decoration: none; font-size: 34px; overflow: hidden; transform: 0.2s; } a:hover{ color: #255784; background-color: #2196f3; box-shadow: 0 0 10px #2196f3 , 0 0 40px #2196f3 , 0 0 80px #2196f3; transition-delay: 1s; } a span{ position: absolute; display: block; } a span:nth-child(1){ top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg , transparent , #2196f3); } a:hover span:nth-child(1){ left: 100%; transition: 1s; } a span:nth-child(3){ bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg , transparent , #2196f3); } a:hover span:nth-child(3){ right: 100%; transition: 1s; transition-delay: 0.5s; } a span:nth-child(2){ top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg , transparent , #2196f3); } a:hover span:nth-child(2){ top: 100%; transition: 1s; transition-delay: 0.25s; } a span:nth-child(4){ bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg , transparent , #2196f3); } a:hover span:nth-child(4){ bottom: 100%; transition: 1s; transition-delay: 0.75s; }
خب اینم از ترفند امروز
امیدوارم خوشال و سرحال باشید
از خونه هم بیرون نرید تا اینکه کرونا تموم شه
اگر سوالی داشتید بهم پیام بدید خوشحال میشم کمکتون کنم ..
تا ترفندی دیگه خدانگهدار
