• Skip to main content

Rafal Tomal

Learn Design and Create Better Websites

  • About
  • Courses
  • Tools
  • Tips
  • Blog
  • Contact
  • Work With Me →

← More Design Tips

Move your button up by a few pixels on hover

posted on August 17, 2018

TweetFacebookLinkedInPin

There is a simple way to create a feeling of dimension in your UI design. You can move your button up by one or two pixels on hover by using this code:


.button:hover {
	-webkit-transform: translateY(-1px);
	transform: translateY(-1px);
}

You can also add a little shadow, highlight the color, and ease the transition. It’ll create a very interesting and natural effect:

Buttons hover

tags: ui ux

Previous tip: Understanding design feedback
Next tip: Optimize your images

Don't Miss Future Design Tips

Join 20k+ people who love good design. Get my best tips, resources, and strategies to elevate your design skills and grow your business.

© Copyright 2008 - 2025 Rafal Tomal.

Affiliate Program . Privacy Policy . Cookie Policy . License .

Follow me on Twitter, Dribbble, and Instagram.

DISCLOSURE: I may be an affiliate for products that I recommend. If you purchase those items through my links I will earn a commission. You will not pay more when buying a product through my link. It helps me to continue to offer you lots of free stuff. Thank you, in advance for your support!