{"id":18286,"date":"2012-09-13T15:47:05","date_gmt":"2012-09-13T22:47:05","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=18286"},"modified":"2015-10-07T07:48:22","modified_gmt":"2015-10-07T14:48:22","slug":"038-adding-button-states","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/v10\/038-adding-button-states\/","title":{"rendered":"#038: Adding Button States"},"content":{"rendered":"<p>We&#8217;ve created the look of a button in it&#8217;s regular state, but a 3D button like that is begging for a &#8220;pushed&#8221; state. What we do is add a darker color to the button on <code>:hover<\/code> and <code>:focus<\/code>. Then for <code>:active<\/code> (pushed), we remove some of the <code>box-shadow<\/code>s and nudge it down and to the right with relative positioning. It&#8217;s as simple as that, the button now has a really obvious and satisfying experience when you click it.<\/p>\n<p>One that that springs to mind: when you adjust relative positioning with top\/left\/bottom\/right values like that, you have to be careful in the future if you need to absolutely position the element. You might get some crazy jumps going on, since top\/left\/bottom\/right means something far different with absolute positioning than it does with relative positioning.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve created the look of a button in it&#8217;s regular state, but a 3D button like that is begging for a &#8220;pushed&#8221; state. What we do is add a darker color to the button on :hover and :focus. Then for :active (pushed), we remove some of the box-shadows and nudge it down and to the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":18010,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":192863,"url":"https:\/\/css-tricks.com\/snippets\/sass\/mixin-offset-positioning\/","url_meta":{"origin":18286,"position":0},"title":"Mixin for Offset Positioning","date":"January 11, 2015","format":false,"excerpt":"If there is one shorthand CSS dramatically misses, it is the one making it possible to define the position property, as well as the four offset properties (top, right, bottom, left). Fortunately, this is typically something that can be solved with a CSS preprocessor such as Sass. We only have\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325845,"url":"https:\/\/css-tricks.com\/video-screencasts\/198-about-the-position-property\/","url_meta":{"origin":18286,"position":1},"title":"#198: About the Position Property","date":"November 20, 2020","format":false,"excerpt":"static: the default relative: allows you to nudge around with top\/right\/bottom\/left, making z-index work, gives you a positioning contextabsolute: top\/right\/bottom\/left moves the element to that exact position, otherwise the same as relativefixed: like absolute, but scrolling the page doesn't move the element sticky: like fixed, but it doesn't become fixed\u2026","rel":"","context":"In \"layout\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/position-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324740,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-origin\/","url_meta":{"origin":18286,"position":2},"title":"mask-origin","date":"October 29, 2020","format":false,"excerpt":"The mask-origin specifies the mask position area of a mask layer image. In other words, it defines where the origin of the mask layer image is, whether it's the edge of the border, padding or content box. .element { \u00a0 mask-image: url(star.svg); \u00a0 mask-origin: content-box; } For elements rendered as\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13966,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/bottom\/","url_meta":{"origin":18286,"position":3},"title":"bottom","date":"August 31, 2011","format":false,"excerpt":"The bottom property in CSS goes hand in hand with positioning. By default, elements are static positioned in which the top property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the bottom value plays a big role. div { bottom: value (px,\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/08\/place.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":14097,"url":"https:\/\/css-tricks.com\/almanac\/properties\/r\/right\/","url_meta":{"origin":18286,"position":4},"title":"right","date":"September 6, 2011","format":false,"excerpt":"The right property in CSS goes hand in hand with positioning. By default, elements are static positioned in which the top property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the bottom value plays a big role. div { right: value (px,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/08\/nudge.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323048,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-position\/","url_meta":{"origin":18286,"position":5},"title":"mask-position","date":"October 12, 2020","format":false,"excerpt":"In CSS, the mask-position property specifies the initial position of a mask layer image relative to the mask position area. It works like the background-position property. .element { \u00a0 mask-image: url(\"star.svg\"); \u00a0 mask-position: 20px center; } Masking allows you to display selected parts of an element while hiding the rest.\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18286"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18286"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18286\/revisions"}],"predecessor-version":[{"id":18287,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18286\/revisions\/18287"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18010"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18286"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}