{"id":15358,"date":"2017-03-13T08:00:52","date_gmt":"2017-03-13T15:00:52","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15358"},"modified":"2020-04-22T06:35:43","modified_gmt":"2020-04-22T13:35:43","slug":"make-expanding-buttons-uxpin","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/","title":{"rendered":"How to Make Expanding Buttons"},"content":{"rendered":"

Calls to action should excite people into doing something. Yet many form buttons do little to encourage the mood. Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.<\/p>\n

\"Expanding<\/p>\n

They\u2019re also easy to simulate in UXPin. Here\u2019s how you can build one yourself.<\/p>\n

1. Create a button<\/h2>\n

Search<\/a> for the button element. Add it to your canvas and take note of its dimensions. If you choose to have round corners, no worries \u2014 we\u2019re only going to change its dimensions and position, not its stylish attributes.<\/p>\n

2. Move it slightly<\/h2>\n

Add a simple interaction<\/a> that, on hover, moves the button -6 pixels horizontally and -6 pixels vertically. Be sure to use the \u201cmove by<\/em>\u201d action, not \u201cmove to.<\/em>\u201d<\/p>\n

\"Move-by<\/p>\n

3. Make it grow<\/h2>\n

Add another interaction that, on hover, expands its width and height by 12 pixels each way.<\/p>\n

\"Resize<\/p>\n

Customizing the effect<\/h2>\n

Six pixels is arbitrary. If you want a different size on hover, then use different figures. The key is to make the resize action twice<\/em> the move. For example, if you move the button up and left by -4 pixels, then you\u2019ll need to increase its width and height by 8 pixels.<\/p>\n

Why not use an advanced animation? Because they\u2019re trickier to reposition. If you decide to move the button after the fact, the animation won\u2019t move along with it. Using the \u201csize\u201d and \u201cmove by\u201d actions, your button is sure to keep its expanding effect no matter where you put it.<\/p>\n

Grab a free UXPin trial<\/a> to simulate buttons that excite people.<\/p>\n

Join the world's best designers who use UXPin.<\/h2>Sign up for a free trial.<\/span>Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"

Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.<\/p>\n","protected":false},"author":27,"featured_media":15496,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11,19],"tags":[],"class_list":["post-15358","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-tutorials","category-uxpin"],"yoast_title":"","yoast_metadesc":"Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.","acf":[],"yoast_head":"\nHow to Make Expanding Buttons | UXPin<\/title>\n<meta name=\"description\" content=\"Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make Expanding Buttons\" \/>\n<meta property=\"og:description\" content=\"Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-13T15:00:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-22T13:35:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Expanding-buttons-teaser.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"How to Make Expanding Buttons\",\"datePublished\":\"2017-03-13T15:00:52+00:00\",\"dateModified\":\"2020-04-22T13:35:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/\"},\"wordCount\":275,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Expanding-buttons-teaser.png\",\"articleSection\":[\"Blog\",\"Tutorials\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/\",\"name\":\"How to Make Expanding Buttons | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Expanding-buttons-teaser.png\",\"datePublished\":\"2017-03-13T15:00:52+00:00\",\"dateModified\":\"2020-04-22T13:35:43+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Expanding-buttons-teaser.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Expanding-buttons-teaser.png\",\"width\":700,\"height\":200,\"caption\":\"Expanding buttons teaser\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/tutorials\\\/make-expanding-buttons-uxpin\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Make Expanding Buttons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Make Expanding Buttons | UXPin","description":"Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/","og_locale":"en_US","og_type":"article","og_title":"How to Make Expanding Buttons","og_description":"Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.","og_url":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/","og_site_name":"Studio by UXPin","article_published_time":"2017-03-13T15:00:52+00:00","article_modified_time":"2020-04-22T13:35:43+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Expanding-buttons-teaser.png","type":"image\/png"}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"How to Make Expanding Buttons","datePublished":"2017-03-13T15:00:52+00:00","dateModified":"2020-04-22T13:35:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/"},"wordCount":275,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Expanding-buttons-teaser.png","articleSection":["Blog","Tutorials","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/","url":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/","name":"How to Make Expanding Buttons | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Expanding-buttons-teaser.png","datePublished":"2017-03-13T15:00:52+00:00","dateModified":"2020-04-22T13:35:43+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Making buttons change color on hover is easy \u2014 and overused. Buttons that swell as people interact with them have a little extra \u201cwow\u201d factor.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Expanding-buttons-teaser.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Expanding-buttons-teaser.png","width":700,"height":200,"caption":"Expanding buttons teaser"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/tutorials\/make-expanding-buttons-uxpin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"How to Make Expanding Buttons"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=15358"}],"version-history":[{"count":0,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15358\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/15496"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}