Full screen button

tdimdev · 20 أغسطس 2019

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

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

وشكرا

Entesar Khaled · 20 أغسطس 2019

أهلًا بك،

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


<!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>

Full screen button

السؤال

tdimdev

رابط هذا التعليق

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

1 جواب على هذا السؤال

Recommended Posts

Entesar Khaled

رابط هذا التعليق

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

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية