{"action":"opened","issue":{"url":"https://api.github.com/repos/bentranter/default/issues/5","labels_url":"https://api.github.com/repos/bentranter/default/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/bentranter/default/issues/5/comments","events_url":"https://api.github.com/repos/bentranter/default/issues/5/events","html_url":"https://github.com/bentranter/default/issues/5","id":73425923,"number":5,"title":"Handle buttons better","user":{"login":"bentranter","id":5421627,"avatar_url":"https://avatars.githubusercontent.com/u/5421627?v=3","gravatar_id":"","url":"https://api.github.com/users/bentranter","html_url":"https://github.com/bentranter","followers_url":"https://api.github.com/users/bentranter/followers","following_url":"https://api.github.com/users/bentranter/following{/other_user}","gists_url":"https://api.github.com/users/bentranter/gists{/gist_id}","starred_url":"https://api.github.com/users/bentranter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bentranter/subscriptions","organizations_url":"https://api.github.com/users/bentranter/orgs","repos_url":"https://api.github.com/users/bentranter/repos","events_url":"https://api.github.com/users/bentranter/events{/privacy}","received_events_url":"https://api.github.com/users/bentranter/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-05-05T20:41:47Z","updated_at":"2015-05-05T20:41:47Z","closed_at":null,"body":"Right now, the situation with buttons is pretty frustrating. There isn't a way to make buttons that follows the immutable/composable pattern, and it's hard to create a way to do it that doesn't require a ton of boilerplate CSS.\r\n\r\nIt would be nice to be able to do something like,\r\n\r\n```HTML\r\n<button class='btn bg-blue white no-border rise'>Click Me</button>\r\n``` \r\n\r\nWhich would translate to something like,\r\n\r\n```CSS\r\nbutton {\r\n  display: inline-block;\r\n  position: relative;\r\n  cursor: pointer;\r\n  background-color: blue;\r\n  color: white;\r\n  border: none;\r\n  transition-duration: .2s;\r\n  transition-timing-function: ease-in-out;\r\n  transition-property: box-shadow;\r\n}\r\n\r\nbutton:hover {\r\n  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);\r\n  transition-delay: 0s;\r\n}\r\n```\r\n\r\nThis example gives you kind of material-design feel to your button. I think the solution lies in the classes that would be used to define the hover effects, for example, the class ``rise`` could look something like,\r\n\r\n```CSS\r\n.rise:hover {\r\n  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);\r\n  transition-delay: 0s;\r\n}\r\n```\r\n\r\nSo, ```rise``` would **only** have hover effects, and would only be used to style an element's hover state. Would it be a good idea to prefix these classes with something, like ```h-rise```, to denote that it's something that only applies to hover states?\r\n\r\nThe prefixing might not be a bad idea, especially since as immutable/composable JavaScript classes will start to get introduced, some ```js-``` classes will start to show up."}}