افکت زیبا برای دکمه - Distorted Button Effects (نمونه 3)

زمان مطالعه: ۵ دقیقه
۱۳ آبان ۱۳۹۶

در این مطلب نمونه 3 از افکت زیبا برای دکمه یا Button با عنوان Distorted Button Effects رو در اختیارتون میزارم و امیدوارم که بدردتون بخوره و بتونین از اون در سایتتون استفاده کنید. زمانی که بر روی دکمه های مورد نظر کلیک میکنید، به زیبایی تغییر شکل میدن و افکت زیبایی رو به نمایش میزارن.

همونطور که در دمو مشاهده کردید، یک دکمه بنام Click ME وجود داره و زمانی که بر روی اون کلیک میکنید، به زیبایی تغییر شکل میده و دو حباب از گوشه های اون بیرون میزنه. برای حالت چسبنده شدن از SVG استفاده شده است. میتونین کد مربوط به این افکت رو در زیر مشاهده کنید.

کدهای مربوط به این افکت

کد HTML :

<section class="section">
	<h3 class="section__title">03</h3>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
		<defs>
			<filter id="filter-goo-3">
				<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
				<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
				<feComposite in="SourceGraphic" in2="goo" />
			</filter>
		</defs>
	</svg>
	<button id="component-3" class="button button--2 button--3" style="filter: url('#filter-goo-3')">
		Click me
		<span class="button__bg"></span>
	</button>
</section>

کد CSS :

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #222;
  background: #f6f6f6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.section {
	width: 400px;
	height: 400px;
	margin: 0 auto;
}

.section__title {
  font-size: 5em;
  font-weight: 900;
  letter-spacing: -0.05em;
  margin: 0 0 1em 0;
  color: #ddd;
  position: relative;
  text-align: left;
  width: 100%;
}

.section__title::before {
  content: '';
  position: absolute;
  top: 1.15em;
  width: 40%;
  height: 0.1em;
  background: #ddd;
  left: 0;
}

.svg-filters {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px;
}

.button {
	cursor: pointer;
}

.button--1, .button--1 .button__bg, .button--2, .button--4, .button--4 .button__bg, .button--5, .button--6, .button--7, .button--8, .button--9, .button--10 {
  -webkit-font-smoothing: antialiased;
  background-color: #222;
  border: none;
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85em;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
  letter-spacing: 0.1em;
  color: white;
  padding: 20px 40px;
  text-transform: uppercase;
  transition: background-color 0.1s ease-out;
}

.button--1:hover, .button--1 .button__bg:hover, .button--2:hover, .button--4:hover, .button--4 .button__bg:hover, .button--5:hover, .button--6:hover, .button--7:hover, .button--8:hover, .button--9:hover, .button--10:hover {
  background-color: #2CD892;
  color: #fff;
}

.button--1:focus, .button--1 .button__bg:focus, .button--2:focus, .button--4:focus, .button--4 .button__bg:focus, .button--5:focus, .button--6:focus, .button--7:focus, .button--8:focus, .button--9:focus, .button--10:focus {
  outline: none;
  color: #fff;
}

/* Indivudual styles */
.button--2 {
  /*outline: 90px solid transparent !important;*/
  position: relative;
  z-index: 0;
  background-color: transparent;
}

.button--2 .left, .button--2 .right {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  background: #222;
  -webkit-transition: background 0.1s ease-out;
  -moz-transition: background 0.1s ease-out;
  transition: background 0.1s ease-out;
  top: 50%;
  margin-top: -12px;
  z-index: -2;
}

.button--2 .left.left, .button--2 .right.left {
  left: 0;
}

.button--2 .left.right, .button--2 .right.right {
  right: 0;
}

.button--2 .button__bg {
  content: "";
  background: #222;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  -webkit-transition: background 0.1s ease-out;
  -moz-transition: background 0.1s ease-out;
  transition: background 0.1s ease-out;
}

.button--2:hover {
  background-color: transparent;
}

.button--2:hover:before, .button--2:hover span {
  background-color: #2CD892;
}

کد JS:

در این مطلب از TweenMax استفاده شده است.

function getRandom(min, max){
  return Math.random() * (max - min) + min;
}

// Remove click on button for demo purpose
document.querySelector('.button').addEventListener('click', function(e) {
	e.preventDefault();
});

initBt3();

// Button 3
function initBt3() {
  var bt = document.querySelectorAll('#component-3')[0];
  var particleCount = 6;
  var particles;
  var clicked = false;
  var filter = document.querySelector('#filter-goo-3 feGaussianBlur');

  bt.addEventListener('mouseenter', function() {
    particles = [];

    TweenLite.to(bt.querySelectorAll('.button__bg'), 1.5, { scaleX: 1.05, ease: Expo.easeOut, delay: 0.2 });

    for (var i = 0; i < particleCount; i++) {
      particles.push(document.createElement('span'));
      bt.appendChild(particles[i]);

      particles[i].classList.add(i % 2 ? 'left' : 'right');
      
      var dir = i % 2 ? '-' : '+';
      var tl = new TimelineLite();

      tl.to(particles[i], 2, { x: dir + 18, scaleX: 1.4, ease: Expo.easeOut });
    }

    TweenLite.to(filter, 1.5, { onUpdate: function() { filter.setAttribute('x', 0); }});
  });

  bt.addEventListener('mouseleave', function() {
    if (clicked) return;

    TweenLite.to(bt.querySelectorAll('.button__bg'), 0.9, { scale: 1, ease: Power3.easeOut, overwrite: 'all' });

    for (var i = 0; i < particles.length; i++) {
      particles[i].classList.add(i % 2 ? 'left' : 'right');

      TweenLite.to(particles[i], 0.6, { x: 0, scaleX: 1, ease: Power3.easeOut, onComplete: function() {
        this.target.parentNode.removeChild(this.target);
      } });
    }

    TweenLite.to(filter, 1.5, { onUpdate: function() { filter.setAttribute('x', 0); }});
  });

  bt.addEventListener('click', function() {
    clicked = true;

    TweenLite.to(bt.querySelectorAll('.button__bg'), 0.9, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4), delay: 0.1, 
      onComplete: function(){
        clicked = false;
      },
      onOverwrite: function(){
        clicked = false;
      } 
    }, 0.6);

    for (var i = 0; i < particleCount; i++) {
      var dir = i % 2 ? '-' : '+';
      var size = i < 2 ? 1 : getRandom(0.2, 0.6);
      var r = i % 2 ? getRandom(-1, 1)*i/2 : getRandom(-1, 1)*i;

      TweenLite.set(particles[i], { scale: size });
      TweenLite.to(particles[i], 0.1, { scale: size, x: dir +'=25' });
      TweenLite.to(particles[i], 0.6, { x: dir + 60, y: r*10, scale: 0, opacity: 0, ease: Power3.easeOut });
    }
  });
}

امیدوارم خوشتون بیاد.

موفق باشید. یا علی

Source

نویسنده
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل