السلام عليكم ورحمة الله وبركاته

اخوتي الاعزاء احتاج كود لتصميم زرار full screen  بلغات html,css,is لوضعها في احد تصاميمي

وشكرا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

أهلًا بك،

إليك هذا التصميم لصاحبه


<!DOCTYPE html>
<html>
<head>
<title>FullScreen Button</title>
<style>
 body, html {
  margin: 0;
  background-color: #3498db;
}
.btn {
  width: 64px;
  height: 64px;
  background-color: #e74c3c;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -32px;
  box-shadow: 0 0 0 2px #fff;
  cursor: pointer;
  transition: all .2s ease-out;
}
.btn:active {
  background-color: #c0392b;
}
.part1, .part2 {
  width: 32px;
  height: 32px;
  background-image: url(https://cdn0.iconfinder.com/data/icons/feather/96/591275-arrow-up-64.png);
  background-size: 32px;
  float: left;
  transition: all .2s ease-out;
}
.part1 {
  transform: rotate(-135deg);
  position: relative;
  top: 32px
}
.part2 {
  transform: rotate(45deg);
}
.btn.fullscreen {
  transform: scale(1.1);
}
.btn.fullscreen .part1 {
  transform: rotate(45deg);
}
.btn.fullscreen .part2 {
  transform: rotate(225deg);
}
</style>
</head>
<body>
<div class="btn">
  <div class="part1"></div>
  <div class="part2"></div>
</div>
<script>
  document.querySelector('.btn').onclick = function () {
  this.classList.toggle('fullscreen');
}
</script>
</body>
</html>

 

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن