wesamdev

افلام هندية$type=sticky$count=4$show=home

$show=home

|روبوتات_$type=slider$source=random-posts$snippet=hide$cate=20$show=home

|اضافات بلوجر$type=three$m=0$rm=0$h=400$c=3$show=home

$show=home

wesamdev

كود Html زر متحرك

اقدم في هذه المقالة زر CSS مصمم بشكل جميل مع تأثيرات الرسوم المتحركة والتمرير عند التمرير ، حيث يظهر ظل متدرج لتصميم أنيق. عند النظر من خلال الأزرار ،

  

كود Html زر متحرك

اقدم في هذه المقالة زر CSS مصمم بشكل جميل مع تأثيرات الرسوم المتحركة والتمرير عند التمرير ، حيث يظهر ظل متدرج لتصميم أنيق. عند النظر من خلال الأزرار ، اختلف على الفور عن الآخرين ، إذا جاز التعبير ، فإنه يلفت الأنظار على الفور بتأثيره الأصلي. ما نراه في البداية على الزر هو ظل في الأسفل ، ولكن عندما يحوم المؤشر ، فإنه يختفي ، وفي نفس الوقت تظهر خدعة بصرية مثيرة للاهتمام.

في صفحة العرض التوضيحي ، يكون رمز HTML افتراضيًا ، وهذا من أجل المظهر فقط. اضطررت إلى تسجيل فصل دراسي لجميع الرسوم المتحركة الموجودة أمام وظيفة التمرير. أنه في المستقبل أضع جميع العناصر تحت الرابط ، حيث يبقى فقط للنسخ والتثبيت في مكانه على الموقع. كما ترى ، تم تصميم نظام الألوان بالمثل للتدرج اللوني ، حيث يمكنك تعيين اللوحة بنفسك التي تتطابق مع النمط الرئيسي للموقع اليك تصميمين.


التصميم الاول

1


Html

Number-1-Free

<a href="https://wiisam21.blogspot.com/"class="graduensa">معاينة</a>



Css

Number-2-Free

.graduensa {
  font-size: 15px;
  position: relative;
  outline: none;
  border: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0.75em 1.75em;
  border-radius: 50px;
  display: inline-block;
  color: #efe8e8;
  text-shadow: 0 1px 0 #40083d;
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(#6311b7), to(#d20fec));
  background: linear-gradient(to right, #6a0dc7, #e012fb);
}
.graduensa::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -10px;
  left: 5%;
  height: 110%;
  width: 90%;
  opacity: 0.8;
  border-radius: 50px;
  background: inherit;
  -webkit-filter: blur(6px);
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
  -ms-filter: blur(6px);
  filter: blur(6px);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.graduensa:hover::after {
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px);
  width: 100%;
  bottom: -5px;
  left: 0;
}
.graduensa:hover:active::after {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

@supports (-ms-ime-align: auto) {
  .graduensa::after, .graduensa:hover::after, .graduensa:active::after {
  display: none;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .graduensa {
  background: -webkit-gradient(linear, left top, right top, from(#7409e0), to(#db17f5));
  background: linear-gradient(to right, #780ee2, #da15f5);
  }
  .graduensa::after, .graduensa:hover::after, .graduensa:active::after {
  display: none;
  }
}


معاينة

مثل هذا التصميم البسيط الذي يبدو أنيقًا على الخلفيات الفاتحة أو الداكنة. لا يوجد تقريبًا أي زخرفة أو مخططات أو عناصر أخرى ، بالنسبة لي ، هذه هي الطريقة التي يبدو بها الزر الافتراضي رائعًا.

دعنا نلقي نظرة على نسخة أخرى من الزر مع الظلال ، حيث يوجد تأثير تحوم ، بالإضافة إلى رسم متحرك جميل في اللحظة التي يكون فيها النقر على إطار الزر.


التصميم الثاني

2


Html

Number-1-Free

<a href="https://wiisam21.blogspot.com/" class="kefekty_animatsu">wesam devloper</a>



Css

Number-2-Free

.kefekty_animatsu {
  position: relative;
  display: inline-block;
  width: 342px;
  height: 90px;
  text-align: center;
  line-height: 90px;
  color: #fff;
  font-size: 23px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  box-sizing: border-box;
  background: linear-gradient(
90deg, #15a1e0, #dc2c8e, #bdac18, #118dc5);
  background-size: 375%;
  border-radius: 12px;
  z-index: 1;
}
   
.kefekty_animatsu:hover {
  animation: animate 8s linear infinite;
}
   
@keyframes animate {
  0% {
  background-position: 0%;
  }
  100% {
  background-position: 400%;
  }
}
   
.kefekty_animatsu:before {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: -1;
  background: linear-gradient(
90deg, #179fdc, #d02785, #e2d02c, #1ba7e6);
  background-size: 400%;
  border-radius: 10px;
  opacity: 0;
  transition: .5s;
}
   
.kefekty_animatsu:hover:before {
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite;
}





كلا الزرين متطابقان تقريبًا في الهيكل ، باستثناء أن الأول له نمط تصميم أصلي باستخدام التدرج اللوني. في الثانية ، كل شيء متماثل ، فقط كإضافة ، هناك المزيد من الرسوم المتحركة على الزر نفسه ، على عكس الخيار الأول.

وفقًا للخيارات ، ما يعجبك أكثر ، وسيبدو رائعًا أيضًا على الموقع.


wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا

COMMENTS

BLOGGER
الاسم

اخبار,45,اداة للكمبيوتر,7,اضافات بلوجر,88,افلام اجنبي,9,افلام روسية,32,افلام عربي مترجمة الي الروسية,1,افلام قديمة,2,افلام هندي,8,البرمجة,8,الجديد في التكنولوجيا,46,العاب,9,النمر,7,اليوتيوب,16,اندرويد,15,اندرويد استوديو,3,برامج كمبيوتر,11,بلوجر,8,تركيا,6,تصميم,3,تطبيقات,20,جافاسكريبت,3,حوادث,5,حول العالم,65,حيوانات,25,خلفيات,1,دروس HTML| بالعربية,2,روبوتات,8,روسيا,60,سياحة,4,سيارات,12,سياسة,17,شروحات,34,شريط الاخبار,1,صحتي,2,طائرات,22,فن,35,قناة الوعي نور,4,قناة قعدة تاريخ,8,قوالب بلوجر,3,كتب الكترونية,7,مالتي ميديا,6,متصفح,2,محليات,4,مسلسل لعبة الحبار,1,مسلسلات اجنبية,2,مسلسلات رمضان 2022,1,مسلسلات رمضان 2120,1,مصر والعرب,2,معدات حربية,34,معدات زراعية,6,مقالات,100,مواصلات النقل,1,مواقع للتصميم,14,وثائقي,14,وسوم بلوجر,2,ويندوز,15,Antivirus,3,Button,1,c++,1,css,37,HTML,11,wesam,2,
rtl
item
Wesam: كود Html زر متحرك
كود Html زر متحرك
اقدم في هذه المقالة زر CSS مصمم بشكل جميل مع تأثيرات الرسوم المتحركة والتمرير عند التمرير ، حيث يظهر ظل متدرج لتصميم أنيق. عند النظر من خلال الأزرار ،
https://1.bp.blogspot.com/-AGuhI7ioJco/YVTTOQrGSqI/AAAAAAAAWk4/OlrVv5CeyZ4vZzlfRI-GC3Wy1OxVcctRQCLcBGAsYHQ/s16000/Yellow%2Band%2BWhite%2BSimple%2BModern%2BBusiness%2BPresentation.png
https://1.bp.blogspot.com/-AGuhI7ioJco/YVTTOQrGSqI/AAAAAAAAWk4/OlrVv5CeyZ4vZzlfRI-GC3Wy1OxVcctRQCLcBGAsYHQ/s72-c/Yellow%2Band%2BWhite%2BSimple%2BModern%2BBusiness%2BPresentation.png
Wesam
https://www.wesamdev.com/2021/09/move-button.html
https://www.wesamdev.com/
https://www.wesamdev.com/
https://www.wesamdev.com/2021/09/move-button.html
true
1297279864306511161
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content