{"pageProps":{"components":[{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fa9bdb0cecec44f1e74c8e4","markup":{"html":"<button class='root'>CSSLab</button>","css":{"background-size":"220%","box-shadow":"0 .2em .3em rgba(0, 0, 0, 0.15)","color":"$hover-background-col$","background-color":"transparent","&:hover":{"transform":"translateY(-2px)","box-shadow":"0 0 .3em rgba(0, 0, 0, 0.25)","background-position":"0","color":"#fff"},"background-position":"100%","border":"3px solid $hover-background-col$","text-transform":"uppercase","padding":"8px 16px","border-radius":"3px","transition":"all .2s ease-out","font-weight":"900","cursor":"pointer","&:active":{"transform":"translateY(-1px)"},"letter-spacing":"2px","background-image":"linear-gradient($gradient-angle$, $hover-background-col$ 0%, $hover-background-col$ 50%, $initial-background-col$ 50%, $initial-background-col$ 100%)","font-size":"14px"},"variables":{"initial-background-col":{"name":"Initial Background Color","default":"transparent"},"hover-background-col":{"name":"Hover Background Color","default":"#3363ff"},"gradient-angle":{"name":"Gradient Angle","default":"110deg"}}},"name":"Angled Gradient Button","slug":"angled-gradient-button","published_at":"2020-11-09T22:08:11.106Z","createdAt":"2020-11-09T22:07:44.149Z","updatedAt":"2020-11-30T21:59:22.998Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"class":"angled-gradient-button","description":"A beautiful button with a slanted gradient hover state","recent_views":[{"_id":"5fdfdbc309c1ea49ce2264a9","ip":"54.198.66.53","published_at":"2020-12-20T23:18:27.820Z","createdAt":"2020-12-20T23:18:27.823Z","updatedAt":"2020-12-20T23:18:27.828Z","__v":0,"component":"5fa9bdb0cecec44f1e74c8e4","id":"5fdfdbc309c1ea49ce2264a9"},{"_id":"5fe12f90e8119b3251de3deb","ip":"34.222.172.161","published_at":"2020-12-21T23:28:16.739Z","createdAt":"2020-12-21T23:28:16.742Z","updatedAt":"2020-12-21T23:28:16.752Z","__v":0,"component":"5fa9bdb0cecec44f1e74c8e4","id":"5fe12f90e8119b3251de3deb"}],"id":"5fa9bdb0cecec44f1e74c8e4"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fac44877e05a73bd2b49963","name":"3D Push Button","markup":{"html":"<buton class=\"root\">CSSLab</button>","css":{"box-shadow":" 0 4px $col-border$","color":"$col-text","background-color":"$col-background","text-transform":"uppercase","padding":"10px 20px","border-radius":"5px","transition":"all .2s ease","font-weight":"900","cursor":"pointer","&:active":{"box-shadow":" 0 1px $col-border$","transform":"translateY(3px)"},"letter-spacing":"1px"},"variables":{"col-background":{"name":"Background Color","default":"#ffd95e"},"col-border":{"name":"Border Color","default":"#c1a23c"},"col-text":{"name":"Text Color","default":"#5e4800"}}},"slug":"3d-push-button","description":"3D Button with a pushing active state","published_at":"2020-11-11T20:07:35.741Z","createdAt":"2020-11-11T20:07:35.747Z","updatedAt":"2020-11-30T22:28:26.576Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"class":"push-button-3d","recent_views":[{"_id":"5fdfdbc409c1ea49ce2264aa","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.239Z","createdAt":"2020-12-20T23:18:28.242Z","updatedAt":"2020-12-20T23:18:28.293Z","__v":0,"component":"5fac44877e05a73bd2b49963","id":"5fdfdbc409c1ea49ce2264aa"},{"_id":"5fe12f91e8119b3251de3ded","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.050Z","createdAt":"2020-12-21T23:28:17.052Z","updatedAt":"2020-12-21T23:28:17.066Z","__v":0,"component":"5fac44877e05a73bd2b49963","id":"5fe12f91e8119b3251de3ded"}],"id":"5fac44877e05a73bd2b49963"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fad5ccb8c82a810431ab077","name":"Suduko","markup":{"html":"<button class=\"root\">Sudoku</button>","css":{"font-family":"serif","color":"$text-col","background-color":"$background-col","&:hover":{"letter-spacing":"3px","color":"$background-col","background":"$text-col"},"border":".1em solid $background-col","text-transform":"lowercase","padding":".5em 2em","border-radius":"5px","font-style":" italic","transition":"all .5s ease","cursor":"pointer","font-size":"2rem"},"variables":{"background-col":{"name":"Background Color","default":"#222"},"text-col":{"name":"Text Color","default":"#fff"}}},"slug":"suduko","description":"Enlarging letter space on hover","class":"elite","published_at":"2020-11-12T16:03:23.525Z","createdAt":"2020-11-12T16:03:23.534Z","updatedAt":"2020-11-20T13:19:08.944Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc409c1ea49ce2264ab","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.277Z","createdAt":"2020-12-20T23:18:28.279Z","updatedAt":"2020-12-20T23:18:28.324Z","__v":0,"component":"5fad5ccb8c82a810431ab077","id":"5fdfdbc409c1ea49ce2264ab"},{"_id":"5fe12f91e8119b3251de3dec","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.022Z","createdAt":"2020-12-21T23:28:17.026Z","updatedAt":"2020-12-21T23:28:17.059Z","__v":0,"component":"5fad5ccb8c82a810431ab077","id":"5fe12f91e8119b3251de3dec"}],"id":"5fad5ccb8c82a810431ab077"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fad8f178c82a810431ab07a","name":"Borderman","markup":{"html":"<button class=\"root btn-border\">CSSLab</button>","css":{"display":" inline-block","&[dot]btn-border:before,\n  £[dot]btn-border:after ":{"content":" ''","border-style":" solid","position":" absolute","z-index":" 5","border-radius":" $border-radius","box-sizing":" content-box","transition":" all 0.3s"},"position":" relative","&[dot]btn-border:hover:after":{"height":" calc(100% + ($border-width * 2))","border-color":"$hover-border-color"},"opacity":" .999","&[dot]btn-border:before ":{"width":" 0","height":" 100%","border-width":" $border-width 0 $border-width 0","top":" -$border-width","left":" -$border-width","transition-delay":" 0.05s"},"margin":" .3em","padding":" .5em 1.5em","&[dot]btn-border:hover:before":{"width":" calc(100% + ($border-width * 2))","border-color":"$hover-border-color"},"border-radius":" $border-radius","transition":" all 0.3s","cursor":"pointer","&[dot]btn-border:hover ":{"color":"$hover-text-color"},"&[dot]btn-border:after ":{"width":" 100%","height":" 0","border-width":" 0 $border-width 0 $border-width","top":" -$border-width","left":" -$border-width"},"&[dot]btn-border ":{"background-color":" transparent","border":" $border-width solid $initial-border-color","color":"$initial-text-color","font-weight":"400"},"font-size":"2rem"},"variables":{"initial-border-color":{"name":"Initial Border Color","default":"rgba(0,0,0,.2)"},"initial-text-color":{"name":"Initial Text Color","default":"#999"},"hover-text-color":{"name":"Hover Text Color","default":"#9b59b6"},"hover-border-color":{"name":"Hover Border Color","default":"#9b59b6"},"border-width":{"name":"Border Width","default":"2px"},"border-radius":{"name":"Border Radius","default":"3px"}}},"slug":"borderman","description":"Colorful border animation","class":"borderman","published_at":"2020-11-12T19:37:59.780Z","createdAt":"2020-11-12T19:37:59.784Z","updatedAt":"2020-11-20T13:02:42.503Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc409c1ea49ce2264ac","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.314Z","createdAt":"2020-12-20T23:18:28.315Z","updatedAt":"2020-12-20T23:18:28.330Z","__v":0,"component":"5fad8f178c82a810431ab07a","id":"5fdfdbc409c1ea49ce2264ac"},{"_id":"5fe12f91e8119b3251de3dee","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.138Z","createdAt":"2020-12-21T23:28:17.139Z","updatedAt":"2020-12-21T23:28:17.142Z","__v":0,"component":"5fad8f178c82a810431ab07a","id":"5fe12f91e8119b3251de3dee"}],"id":"5fad8f178c82a810431ab07a"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fada9748c82a810431ab07b","name":"Blobby Button","markup":{"html":"<button class=\"blobby-button\">\n  CSSLab\n  <span class=\"inner\">\n  <span class=\"blobs\">\n    <span class=\"blob\"></span>\n    <span class=\"blob\"></span>\n    <span class=\"blob\"></span>\n    <span class=\"blob\"></span>\n    </span>\n  </span>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n    <defs>\n      <filter id=\"goo\">\n        <feGaussianBlur in=\"SourceGraphic\" result=\"blur\" stdDeviation=\"10\"></feGaussianBlur>\n        <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7\" result=\"goo\"></feColorMatrix>\n        <feBlend in2=\"goo\" in=\"SourceGraphic\" result=\"mix\"></feBlend>\n      </filter>\n    </defs>\n  </svg>\n</button>","css":{"& [dot]blobs":{"position":" relative","display":" block","height":" 100%","filter":" url('#goo')"},"overflow":"hidden","outline":"none","display":"flex","color":" $button-color","background-color":" transparent","text-align":"center","& [dot]blob:nth-child(1) ":{"left":"0","transition-delay":"0"},"position":" relative","& [dot]blob:nth-child(2) ":{"left":"calc(120% / 4)","transition-delay":"calc(($transition-duration * .12) * 1)"},"& [dot]blob:nth-child(3) ":{"left":"calc(2 * (120% / 4))","transition-delay":"calc(($transition-duration * .12) * 2)"},"border":"none","&:hover [dot]blob ":{"transform":" translateZ(0) scale(1.7)"},"& [dot]blob:nth-child(4) ":{"left":"calc(3 * (120% / 4))","transition-delay":"calc(($transition-duration * .12) * 3)"},"&:before ":{"width":" 100%","left":" 0","height":" 100%","position":" absolute","border":" 3px solid $border-color","border-radius":"4px","top":" 0","content":" \"\"","z-index":" 1"},"padding":"1em 2em","& [dot]blob":{"position":" absolute","top":" 3px","width":" calc(100% / $number-of-blobs)","height":" 100%","background":" $button-color","border-radius":" 100%","transform":" translate3d(0,150%,0) scale(1.7)","transition":" transform $transition-duration"},"border-radius":"4px","transition":" color calc($transition-duration * .75)","font-weight":" 900","cursor":" pointer","&:hover ":{"color":"#fff"},"& > svg ":{"display":"none"},"align-items":"center","letter-spacing":"2px","justify-content":"center","z-index":" 1","font-size":" 16px","& [dot]inner ":{"z-index":" -1","overflow":" hidden","position":" absolute","left":" 0","top":" 0","width":" 100%","height":" 100%"}},"variables":{"border-color":{"name":"Border Color","default":"#9a02ff"},"text-color":{"name":"Text Color","default":"#9a02ff"},"button-color":{"name":"Hover Background Color","default":"#9a02ff"},"number-of-blobs":{"name":"Blob Spacing","default":"4"},"transition-duration":{"name":"Transition Duration","default":"0.5s"}}},"slug":"blobby-button","description":"A button with blobs flowing up on hover","class":"blobby-button","published_at":"2020-11-12T21:30:28.646Z","createdAt":"2020-11-12T21:30:28.666Z","updatedAt":"2020-11-20T13:18:01.767Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc409c1ea49ce2264ad","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.428Z","createdAt":"2020-12-20T23:18:28.431Z","updatedAt":"2020-12-20T23:18:28.435Z","__v":0,"component":"5fada9748c82a810431ab07b","id":"5fdfdbc409c1ea49ce2264ad"},{"_id":"5fe12f91e8119b3251de3def","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.335Z","createdAt":"2020-12-21T23:28:17.338Z","updatedAt":"2020-12-21T23:28:17.355Z","__v":0,"component":"5fada9748c82a810431ab07b","id":"5fe12f91e8119b3251de3def"}],"id":"5fada9748c82a810431ab07b"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fae59b58c82a810431ab07f","name":"Outpulser","markup":{"html":"<button class=\"root\">\n  <span>Outpulser</span>\n</button>","css":{"color":"$col-text","background-color":"$col-background","text-align":" center","position":" relative","&::after ":{"width":" 100%","left":" 0","height":" 100%","position":" absolute","opacity":" 0","border":" $border-width solid $col-hover-border","transform":" scale(1.2)","border-radius":"$border-radius","top":" 0","transition":" all $transition-speed","content":" ''","z-index":" 1"},"&:hover::after ":{"opacity":" 1","transform":" scale(1)"},"padding":".5em 1em","border-radius":"$border-radius","transition":" all $transition-speed","cursor":" pointer","&:hover ":{"transform":"scale(1.1)","box-shadow":"0 .2em .5em rgba(0,0,0,.3)"},"&:hover::before ":{"opacity":"0","transform":" scale(0)"},"&::before ":{"background-color":" $col-hover-background-overlay","width":" 100%","left":" 0","height":" 100%","position":" absolute","opacity":".2","transform":" scale(1)","border-radius":"$border-radius","top":" 0","transition":" all $transition-speed","content":" ''","z-index":" 1"},"&:focus ":{"outline":"none"},"-webkit-backface-visibility":" hidden","user-select":"none","font-size":"1.2em"},"variables":{"col-background":{"name":"Background Color","default":"#66A182"},"col-hover-background-overlay":{"name":"Hover Background Overlay","default":"#fff"},"col-text":{"name":"Text Color","default":"#fff"},"col-hover-border":{"name":"Hover Border Color","default":"#27513b"},"border-width":{"name":"Border Width","default":"2px"},"border-radius":{"name":"Border Radius","default":"3px"},"transition-speed":{"name":"Transition Speed","default":"0.3s"}}},"slug":"Outpulser","description":"Button with an outwards pulse animation","class":"outpulser","published_at":"2020-11-13T10:02:29.911Z","createdAt":"2020-11-13T10:02:29.917Z","updatedAt":"2020-11-30T22:29:50.544Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc409c1ea49ce2264ae","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.521Z","createdAt":"2020-12-20T23:18:28.523Z","updatedAt":"2020-12-20T23:18:28.526Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fdfdbc409c1ea49ce2264ae"},{"_id":"5fe12f91e8119b3251de3df1","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.464Z","createdAt":"2020-12-21T23:28:17.467Z","updatedAt":"2020-12-21T23:28:17.471Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fe12f91e8119b3251de3df1"}],"id":"5fae59b58c82a810431ab07f"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fae5afb8c82a810431ab080","name":"Inpulser","markup":{"html":"<button class=\"root\">\n  <span>Inpulser</span>\n</button>","css":{"outline":"none","color":"$col-text","background-color":"$col-background","text-align":" center","position":" relative","&::after ":{"width":" 100%","left":" 0","height":" 100%","position":" absolute","opacity":" 0","border":" $border-width solid $col-hover-border","transform":" scale(1.2)","border-radius":"$border-radius","top":" 0","transition":" all $transition-speeds","content":" ''","z-index":" 1"},"&:hover::after ":{"opacity":" 1","transform":" scale(1)"},"padding":".5em 1em","border-radius":"$border-radius","transition":" all $transition-speeds","cursor":" pointer","&:hover ":{"transform":"scale(1.1)","box-shadow":"0 .2em .5em rgba(0,0,0,.3)"},"&:hover::before ":{"opacity":"0","transform":" scale(1)"},"&::before ":{"background-color":" $col-hover-background-overlay","width":" 100%","left":" 0","height":" 100%","position":" absolute","opacity":"$initial-overlay-strength","transform":" scale(0)","border-radius":"$border-radius","top":" 0","transition":" all $transition-speeds","content":" ''","z-index":" 1"},"&:focus ":{"outline":"none"},"-webkit-backface-visibility":" hidden","user-select":"none","font-size":"1.2em"},"variables":{"col-background":{"name":"Background Color","default":"#ff6766"},"col-hover-background-overlay":{"name":"Overlay Color (translucent)","default":"#fff"},"initial-overlay-strength":{"name":"Initial Overlay Strength","default":".5"},"col-text":{"name":"Text Color","default":"#fff"},"col-hover-border":{"name":"Hover Border Color","default":"#cd4746"},"border-width":{"name":"Hover Border Width","default":"2px"},"border-radius":{"name":"Border Radius","default":"3px"},"transition-speed":{"name":"Transition Speed","default":"0.3"}}},"slug":"inpulser","description":"Button with an inwards pulse animation","class":"inpulser","published_at":"2020-11-13T10:07:55.132Z","createdAt":"2020-11-13T10:07:55.149Z","updatedAt":"2020-12-05T14:48:20.649Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc409c1ea49ce2264af","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.564Z","createdAt":"2020-12-20T23:18:28.566Z","updatedAt":"2020-12-20T23:18:28.576Z","__v":0,"component":"5fae5afb8c82a810431ab080","id":"5fdfdbc409c1ea49ce2264af"},{"_id":"5fe12f91e8119b3251de3df0","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.357Z","createdAt":"2020-12-21T23:28:17.358Z","updatedAt":"2020-12-21T23:28:17.374Z","__v":0,"component":"5fae5afb8c82a810431ab080","id":"5fe12f91e8119b3251de3df0"}],"id":"5fae5afb8c82a810431ab080"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fb0131e14cf992bfd6ab468","name":"Animated Close Button","markup":{"html":"<button class=\"root\">\n  <span class=\"text\">CSSLab</span>\n  <div class=\"icons\">\n    <div class=\"cross\"></div>\n    <div class=\"check\"></div>\n  </div>\n</button>","css":{"& > [dot]text ":{"padding-right":"1.5em","display":"block","position":"relative","text-transform":"uppercase","padding":".5em 1em","transition":"all $transition-speeds ease-out","font-weight":"700","border-right":"2px solid rgba(255,255,255,.1)","letter-spacing":"1px","margin-right":"3em","font-size":"13px"},"overflow":"hidden","color":"$text-color","background-color":"$background-color","position":" relative","& [dot]cross::after, £ [dot]cross::before ":{"display":"block","background-color":"$text-color","margin-left":"auto","width":"1em","left":"0","height":".2em","position":"absolute","transition":"all $transition-speeds ease-out","content":"\"\"","right":"0","margin-right":"auto"},"& [dot]cross::after ":{"transform":"rotate(45deg)"},"padding":".75rem 1rem","border-radius":"4px","transition":"all $transition-speeds ease-out","& [dot]cross ":{"margin-top":"-2px"},"& [dot]cross::before ":{"transform":"rotate(-45deg)"},"cursor":"pointer","&:hover ":{"background-color":"$background-hover-color"},"& > [dot]icons ":{"display":"flex","width":"3em","height":"100%","position":"absolute","flex-direction":"column","top":"0","transition":"all $transition-speeds ease-out","align-items":"center","right":"0","justify-content":"center"},"&:hover [dot]text ":{"transform":"translateX(calc(-100% - 3em))"},"&:hover [dot]icons ":{"width":"100%","transform":"scale(1.3)"}},"variables":{"background-color":{"name":"Background Color","default":"#b60000"},"background-hover-color":{"name":"Background Hover Color","default":"#c44346"},"text-color":{"name":"Text Color","default":"#fff"},"transition-speed":{"name":"Transition Speed","default":"0.15"}}},"slug":"animated-close-button","description":"Close button animated with a hover state transition","class":"close-button","published_at":"2020-11-14T17:25:49.997Z","createdAt":"2020-11-14T17:25:50.018Z","updatedAt":"2020-11-20T13:02:42.503Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc409c1ea49ce2264b2","ip":"54.198.66.53","published_at":"2020-12-20T23:18:28.797Z","createdAt":"2020-12-20T23:18:28.799Z","updatedAt":"2020-12-20T23:18:28.807Z","__v":0,"component":"5fb0131e14cf992bfd6ab468","id":"5fdfdbc409c1ea49ce2264b2"},{"_id":"5fe12f91e8119b3251de3df4","ip":"34.222.172.161","published_at":"2020-12-21T23:28:17.938Z","createdAt":"2020-12-21T23:28:17.940Z","updatedAt":"2020-12-21T23:28:17.946Z","__v":0,"component":"5fb0131e14cf992bfd6ab468","id":"5fe12f91e8119b3251de3df4"}],"id":"5fb0131e14cf992bfd6ab468"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fb53bf00d227153f2534a57","name":"Rotating Cuboid 3d","markup":{"html":"<button class=\"root\">\n  <div class=\"face face-front\">\n  <span>Front</span>\n  </div>\n  <div class=\"face face-back\">\n <span>Back</span>\n </div>\n</button>","css":{"&:hover [dot]face-back":{"transform":" rotateX(0deg)","z-index":"3"},"& [dot]face-back":{"background-color":"$back-background-color","color":"$back-text-color","transform":" rotateX(90deg)","transform-origin":" 50% 50% calc(-$size * 1.5)","z-index":"1"},"text-align":" center","width":" 10em","height":" 2.75em","border":" 0","margin":" 0","& [dot]face-front":{"color":"$front-text-color","background-color":"$front-background-color","transform":" rotateX(0deg)","transform-origin":" 50% 50% calc(-$size * 1.5)","z-index":"2"},"&:hover [dot]face-front":{"transform":" rotateX(-90deg)"},"& [dot]face":{"box-sizing":"content-box","display":"flex","text-align":" center","width":" 100%","height":" 2.75em","position":" absolute","pointer-events":" none","border":" $border-color solid $border-width","transition":" all $transform-durations ease","margin-top":" -25px","align-items":"center","justify-content":"center"},"cursor":"pointer","& span ":{"text-transform":"uppercase","font-weight":"900","letter-spacing":"1px","font-size":".9em"},"perspective":" 500px","font-size":"$size"},"js":"","variables":{"front-background-color":{"name":"Front Background Color","default":"#FFAEA5"},"front-text-color":{"name":"Front Text Color","default":"#9c574f"},"back-background-color":{"name":"Back Background Color","default":"#8FCACA"},"back-text-color":{"name":"Back Text Color","default":"#3F7575"},"border-width":{"name":"Border Width","default":"2px"},"border-color":{"name":"Border Color","default":"rgba(0,0,0,.2)"},"size":{"name":"Size","default":"16px"},"transform-duration":{"name":"Transform Duration","default":".2"}}},"slug":"rotating-cuboid-3d","description":"Cuboid that rotates 90 degrees!","class":"rotating-cuboid-3d","published_at":"2020-11-18T15:21:20.196Z","createdAt":"2020-11-18T15:21:20.218Z","updatedAt":"2020-11-20T13:02:42.503Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc509c1ea49ce2264b4","ip":"54.198.66.53","published_at":"2020-12-20T23:18:29.030Z","createdAt":"2020-12-20T23:18:29.032Z","updatedAt":"2020-12-20T23:18:29.035Z","__v":0,"component":"5fb53bf00d227153f2534a57","id":"5fdfdbc509c1ea49ce2264b4"},{"_id":"5fe12f92e8119b3251de3df7","ip":"34.222.172.161","published_at":"2020-12-21T23:28:18.199Z","createdAt":"2020-12-21T23:28:18.201Z","updatedAt":"2020-12-21T23:28:18.219Z","__v":0,"component":"5fb53bf00d227153f2534a57","id":"5fe12f92e8119b3251de3df7"}],"id":"5fb53bf00d227153f2534a57"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fc55f7e70a4a36fc29da74a","name":"Reflective Glass","markup":{"html":"<button class=\"root\">CSSLab</button>","css":{"overflow":"hidden","box-shadow":"inset 0 0 .5rem .3rem rgba(255,255,255, 0)","color":"$text-color","background-color":"$background-color","position":"relative","border":" 2px solid $border-color","text-transform":"uppercase","padding":"10px 25px","border-radius":"$border-radius","transition":"all $transition-speed ease","font-weight":"bold","cursor":"pointer","&:hover ":{"box-shadow":"inset 0 0 1rem 0 rgba(218, 218, 218, 0.4)","color":"$text-color"},"&:hover::before ":{"left":"-100%"},"&::before ":{"content":"\"\"","position":"absolute","top":"0","left":"100%","width":"100%","height":"100%","background":" linear-gradient(120deg, transparent, rgba(218, 218, 218, 0.4), transparent)","transition":"all $transition-speed ease"},"letter-spacing":"1px","font-size":"16px"},"js":"","variables":{"transition-speed":{"name":"Transition Speed","default":".25s"},"border-color":{"name":"Border Color","default":"rgba(0,0,0,.3)"},"border-radius":{"name":"Border Radius","default":"3px"},"text-color":{"name":"Text Color","default":"#fff"},"background-color":{"name":"Background Color","default":"darkred"}}},"slug":"reflective-glass","description":"Pimp out your application with this reflective button!","class":"reflective","animation_info":null,"published_at":"2020-11-30T21:09:18.254Z","createdAt":"2020-11-30T21:09:18.272Z","updatedAt":"2020-12-18T01:35:44.207Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc509c1ea49ce2264b9","ip":"54.198.66.53","published_at":"2020-12-20T23:18:29.570Z","createdAt":"2020-12-20T23:18:29.573Z","updatedAt":"2020-12-20T23:18:29.593Z","__v":0,"component":"5fc55f7e70a4a36fc29da74a","id":"5fdfdbc509c1ea49ce2264b9"},{"_id":"5fe12f92e8119b3251de3df9","ip":"34.222.172.161","published_at":"2020-12-21T23:28:18.365Z","createdAt":"2020-12-21T23:28:18.367Z","updatedAt":"2020-12-21T23:28:18.371Z","__v":0,"component":"5fc55f7e70a4a36fc29da74a","id":"5fe12f92e8119b3251de3df9"}],"id":"5fc55f7e70a4a36fc29da74a"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fc5645670a4a36fc29da74b","name":"Rotating 3D Button","markup":{"html":"<button class=\"root\">CSSLab</button>","css":{"box-shadow":" 0 2px 2px rgba(0,0,0,.2),\n    inset 0 0 20px 10px rgba(0,0,0,.1)","color":"$text-color","background-color":"$background-color","padding":"12px 25px","transition":"all $transition-speed ease","font-weight":"bold","cursor":"pointer","&:hover ":{"transform":"scale($scaling) rotate($rotation-degrees)","box-shadow":" -3px 2px 10px rgba(0,0,0,.5),\n       inset 0 0 20px 10px rgba(0,0,0,.1)"},"letter-spacing":"1px","font-size":"18px"},"js":"","variables":{"background-color":{"name":"Background Color","default":"hotpink"},"text-color":{"name":"Text Color","default":"#fff"},"rotation-degrees":{"name":"Rotation Degrees","default":"8deg"},"scaling":{"name":"Scaling","default":"1.2"},"transition-speed":{"name":"Transition Speed","default":".5s"}}},"slug":"rotating-button","description":"3D button with rotation & scalling properties!","class":"rotated-button","animation_info":null,"published_at":"2020-11-30T21:29:58.005Z","createdAt":"2020-11-30T21:29:58.011Z","updatedAt":"2020-12-18T01:35:49.249Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc509c1ea49ce2264ba","ip":"54.198.66.53","published_at":"2020-12-20T23:18:29.603Z","createdAt":"2020-12-20T23:18:29.605Z","updatedAt":"2020-12-20T23:18:29.619Z","__v":0,"component":"5fc5645670a4a36fc29da74b","id":"5fdfdbc509c1ea49ce2264ba"},{"_id":"5fe12f92e8119b3251de3dfb","ip":"34.222.172.161","published_at":"2020-12-21T23:28:18.485Z","createdAt":"2020-12-21T23:28:18.487Z","updatedAt":"2020-12-21T23:28:18.495Z","__v":0,"component":"5fc5645670a4a36fc29da74b","id":"5fe12f92e8119b3251de3dfb"}],"id":"5fc5645670a4a36fc29da74b"},{"technologies":[],"_id":"5fcfe9938e077f417350acfe","name":"Arrow Link","markup":{"html":"<a class=\"arrow-link\">See more<span class=\"arrow\"></span></a>","css":{"display":"flex","color":"$text-color","background-color":"transparent","& > [dot]arrow ":{"width":"8px","height":"8px","border-right":"$arrow-thickness solid $text-color","border-bottom":"$arrow-thickness solid $text-color","position":"relative","transform":"rotate(-45deg)","margin-left":"3px","transition":"all $transition-speed ease"},"& > [dot]arrow::before ":{"display":"block","background-color":"$text-hover-color","width":"3px","transform-origin":"bottom right","height":"$arrow-thickness","position":"absolute","opacity":"0","bottom":"calc(-$arrow-thickness / 2)","transform":"rotate(45deg)","transition":"all $transition-speed ease","content":"\"\"","right":"0"},"text-transform":"uppercase","&:hover > [dot]arrow ":{"transform":"rotate(-45deg) translate(4px, 4px)","border-color":"$text-hover-color"},"&:hover > [dot]arrow::before ":{"opacity":"1","width":"$arrow-width"},"transition":"all $transition-speed ease","font-weight":"bold","cursor":"pointer","&:hover ":{"color":"$text-hover-color"},"align-items":"center","letter-spacing":"1px","font-size":"14px"},"js":"","variables":{"text-color":{"name":"Text Color","default":"salmon"},"text-hover-color":{"name":"Text Hover Color","default":"#D95E39"},"arrow-thickness":{"name":"Arrow Thickness","default":"2px"},"arrow-width":{"name":"Arrow Width","default":"8px"},"transition-speed":{"name":"Transition Speed","default":".3s"}}},"slug":"arrow-link","description":"Inline link with arrow hover animation","class":"arrow-link","animation_info":null,"published_at":"2020-12-08T21:01:07.951Z","createdAt":"2020-12-08T21:01:07.976Z","updatedAt":"2020-12-08T21:08:57.075Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc609c1ea49ce2264c2","ip":"54.198.66.53","published_at":"2020-12-20T23:18:30.256Z","createdAt":"2020-12-20T23:18:30.258Z","updatedAt":"2020-12-20T23:18:30.269Z","__v":0,"component":"5fcfe9938e077f417350acfe","id":"5fdfdbc609c1ea49ce2264c2"},{"_id":"5fe1160809c1ea49ce2264d2","ip":"82.34.166.94","published_at":"2020-12-21T21:39:20.952Z","createdAt":"2020-12-21T21:39:20.956Z","updatedAt":"2020-12-21T21:39:20.960Z","__v":0,"component":"5fcfe9938e077f417350acfe","id":"5fe1160809c1ea49ce2264d2"},{"_id":"5fe1160909c1ea49ce2264d3","ip":"82.34.166.94","published_at":"2020-12-21T21:39:21.602Z","createdAt":"2020-12-21T21:39:21.605Z","updatedAt":"2020-12-21T21:39:21.608Z","__v":0,"component":"5fcfe9938e077f417350acfe","id":"5fe1160909c1ea49ce2264d3"},{"_id":"5fe1166e09c1ea49ce2264d4","ip":"82.34.166.94","published_at":"2020-12-21T21:41:02.118Z","createdAt":"2020-12-21T21:41:02.121Z","updatedAt":"2020-12-21T21:41:02.125Z","__v":0,"component":"5fcfe9938e077f417350acfe","id":"5fe1166e09c1ea49ce2264d4"},{"_id":"5fe1166e09c1ea49ce2264d5","ip":"82.34.166.94","published_at":"2020-12-21T21:41:02.233Z","createdAt":"2020-12-21T21:41:02.236Z","updatedAt":"2020-12-21T21:41:02.240Z","__v":0,"component":"5fcfe9938e077f417350acfe","id":"5fe1166e09c1ea49ce2264d5"},{"_id":"5fe11b6c09c1ea49ce2264d6","ip":"82.34.166.94","published_at":"2020-12-21T22:02:20.231Z","createdAt":"2020-12-21T22:02:20.234Z","updatedAt":"2020-12-21T22:02:20.238Z","__v":0,"component":"5fcfe9938e077f417350acfe","id":"5fe11b6c09c1ea49ce2264d6"},{"_id":"5fe11b6c09c1ea49ce2264d7","ip":"82.34.166.94","published_at":"2020-12-21T22:02:20.698Z","createdAt":"2020-12-21T22:02:20.701Z","updatedAt":"2020-12-21T22:02:20.704Z","__v":0,"component":"5fcfe9938e077f417350acfe","id":"5fe11b6c09c1ea49ce2264d7"}],"id":"5fcfe9938e077f417350acfe"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fcfeb238e077f417350acff","name":"Arrow Button","markup":{"html":"<button class=\"arrow-button\">See more<span class=\"arrow\"></span></button>","css":{"display":"flex","color":"$text-color","background-color":"$background-color","& > [dot]arrow ":{"width":"6px","height":"6px","border-right":"$arrow-thickness solid $text-color","border-bottom":"$arrow-thickness solid $text-color","position":"relative","transform":"rotate(-45deg)","margin":"0 6px","transition":"all $transition-speeds ease"},"& > [dot]arrow::before ":{"display":"block","background-color":"currentColor","width":"3px","transform-origin":"bottom right","height":"$arrow-thickness","position":"absolute","opacity":"0","bottom":"calc(-$arrow-thickness / 2)","transform":"rotate(45deg)","transition":"all $transition-speeds ease","content":"\"\"","right":"0"},"&:hover > [dot]arrow ":{"transform":"rotate(-45deg) translate(4px, 4px)","border-color":"$text-hover-color"},"&:hover > [dot]arrow::before ":{"opacity":"1","width":"$arrow-width"},"padding":"10px 16px","border-radius":"20px","transition":"all $transition-speeds ease","font-weight":"bold","cursor":"pointer","&:hover ":{"background-color":"$background-hover-color","color":"#fff"},"align-items":"center","font-size":"14px"},"js":"","variables":{"background-color":{"name":"Background Color","default":"#00E692"},"background-hover-color":{"name":"Background Hover Color","default":"#017A4F"},"text-color":{"name":"Text Color","default":"#C2FFE9"},"arrow-thickness":{"name":"Arrow Thickness","default":"2px"},"arrow-width":{"name":"Arrow Width","default":"8px"},"transition-speed":{"name":"Transition Speed","default":".3"}}},"slug":"arrow-button","description":"Solid button with arrow hover animation","class":"arrow-button","animation_info":null,"published_at":"2020-12-08T21:07:47.165Z","createdAt":"2020-12-08T21:07:47.192Z","updatedAt":"2020-12-18T01:34:28.570Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc609c1ea49ce2264c4","ip":"54.198.66.53","published_at":"2020-12-20T23:18:30.435Z","createdAt":"2020-12-20T23:18:30.437Z","updatedAt":"2020-12-20T23:18:30.445Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fdfdbc609c1ea49ce2264c4"},{"_id":"5fdfdeff09c1ea49ce2264cc","ip":"82.34.166.94","published_at":"2020-12-20T23:32:15.595Z","createdAt":"2020-12-20T23:32:15.599Z","updatedAt":"2020-12-20T23:32:15.621Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fdfdeff09c1ea49ce2264cc"},{"_id":"5fe11dd709c1ea49ce2264d8","ip":"82.34.166.94","published_at":"2020-12-21T22:12:39.913Z","createdAt":"2020-12-21T22:12:39.918Z","updatedAt":"2020-12-21T22:12:39.923Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe11dd709c1ea49ce2264d8"},{"_id":"5fe11dd909c1ea49ce2264d9","ip":"82.34.166.94","published_at":"2020-12-21T22:12:41.160Z","createdAt":"2020-12-21T22:12:41.164Z","updatedAt":"2020-12-21T22:12:41.168Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe11dd909c1ea49ce2264d9"},{"_id":"5fe11de209c1ea49ce2264da","ip":"82.34.166.94","published_at":"2020-12-21T22:12:50.211Z","createdAt":"2020-12-21T22:12:50.213Z","updatedAt":"2020-12-21T22:12:50.218Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe11de209c1ea49ce2264da"},{"_id":"5fe11ef409c1ea49ce2264de","ip":"82.34.166.94","published_at":"2020-12-21T22:17:24.046Z","createdAt":"2020-12-21T22:17:24.048Z","updatedAt":"2020-12-21T22:17:24.051Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe11ef409c1ea49ce2264de"},{"_id":"5fe11ef409c1ea49ce2264df","ip":"82.34.166.94","published_at":"2020-12-21T22:17:24.381Z","createdAt":"2020-12-21T22:17:24.382Z","updatedAt":"2020-12-21T22:17:24.385Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe11ef409c1ea49ce2264df"},{"_id":"5fe11f6809c1ea49ce2264e2","ip":"82.34.166.94","published_at":"2020-12-21T22:19:20.010Z","createdAt":"2020-12-21T22:19:20.012Z","updatedAt":"2020-12-21T22:19:20.044Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe11f6809c1ea49ce2264e2"},{"_id":"5fe11f6909c1ea49ce2264e4","ip":"82.34.166.94","published_at":"2020-12-21T22:19:21.951Z","createdAt":"2020-12-21T22:19:21.952Z","updatedAt":"2020-12-21T22:19:21.955Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe11f6909c1ea49ce2264e4"},{"_id":"5fe12f95e8119b3251de3e08","ip":"34.222.172.161","published_at":"2020-12-21T23:28:21.218Z","createdAt":"2020-12-21T23:28:21.221Z","updatedAt":"2020-12-21T23:28:21.228Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe12f95e8119b3251de3e08"},{"_id":"5fe12fbfe8119b3251de3e0f","ip":"13.56.14.229","published_at":"2020-12-21T23:29:03.024Z","createdAt":"2020-12-21T23:29:03.032Z","updatedAt":"2020-12-21T23:29:03.055Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe12fbfe8119b3251de3e0f"},{"_id":"5fe12fe9e8119b3251de3e11","ip":"54.193.174.92","published_at":"2020-12-21T23:29:45.188Z","createdAt":"2020-12-21T23:29:45.190Z","updatedAt":"2020-12-21T23:29:45.237Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe12fe9e8119b3251de3e11"},{"_id":"5fe12fe9e8119b3251de3e13","ip":"54.176.77.20","published_at":"2020-12-21T23:29:45.267Z","createdAt":"2020-12-21T23:29:45.278Z","updatedAt":"2020-12-21T23:29:45.308Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe12fe9e8119b3251de3e13"},{"_id":"5fe12fefe8119b3251de3e23","ip":"18.144.46.118","published_at":"2020-12-21T23:29:51.473Z","createdAt":"2020-12-21T23:29:51.475Z","updatedAt":"2020-12-21T23:29:51.501Z","__v":0,"component":"5fcfeb238e077f417350acff","id":"5fe12fefe8119b3251de3e23"}],"id":"5fcfeb238e077f417350acff"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fd7c2538e077f417350ad01","name":"Icon Button 3D","markup":{"html":"<button class=\"icon-button-3d\">\n  <span class=\"text\">View More</span>\n  <span class=\"icon\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 4.706c-2.938-1.83-7.416-2.566-12-2.706v17.714c3.937.12 7.795.681 10.667 1.995.846.388 1.817.388 2.667 0 2.872-1.314 6.729-1.875 10.666-1.995v-17.714c-4.584.14-9.062.876-12 2.706zm-10 13.104v-13.704c5.157.389 7.527 1.463 9 2.334v13.168c-1.525-.546-4.716-1.504-9-1.798zm20 0c-4.283.293-7.475 1.252-9 1.799v-13.171c1.453-.861 3.83-1.942 9-2.332v13.704zm-2-10.214c-2.086.312-4.451 1.023-6 1.672v-1.064c1.668-.622 3.881-1.315 6-1.626v1.018zm0 3.055c-2.119.311-4.332 1.004-6 1.626v1.064c1.549-.649 3.914-1.361 6-1.673v-1.017zm0-2.031c-2.119.311-4.332 1.004-6 1.626v1.064c1.549-.649 3.914-1.361 6-1.673v-1.017zm0 6.093c-2.119.311-4.332 1.004-6 1.626v1.064c1.549-.649 3.914-1.361 6-1.673v-1.017zm0-2.031c-2.119.311-4.332 1.004-6 1.626v1.064c1.549-.649 3.914-1.361 6-1.673v-1.017zm-16-6.104c2.119.311 4.332 1.004 6 1.626v1.064c-1.549-.649-3.914-1.361-6-1.672v-1.018zm0 5.09c2.086.312 4.451 1.023 6 1.673v-1.064c-1.668-.622-3.881-1.315-6-1.626v1.017zm0-2.031c2.086.312 4.451 1.023 6 1.673v-1.064c-1.668-.622-3.881-1.316-6-1.626v1.017zm0 6.093c2.086.312 4.451 1.023 6 1.673v-1.064c-1.668-.622-3.881-1.315-6-1.626v1.017zm0-2.031c2.086.312 4.451 1.023 6 1.673v-1.064c-1.668-.622-3.881-1.315-6-1.626v1.017z\"/></svg>\n  </span>\n</button>","css":{"& > [dot]text ":{"line-height":"1","white-space":"nowrap","box-shadow":"0 .3em 0 0 $background-color-dark","text-align":"left","min-width":"min-content","text-transform":"uppercase","font-weight":"600","border-bottom-left-radius":"$border-radius","flex":"1","letter-spacing":"1px","background-image":"linear-gradient(180deg, $background-color-dark, $background-color-light)","border-top-left-radius":"$border-radius"},"display":"flex","box-shadow":"0 0 3px rgba(0,0,0,.1)","color":"$text-color","background-color":"transparent","width":"12em","&:active ":{"transform":"translateY(.2em)"},"&:active [dot]text ":{"box-shadow":"0 .1em 0 0 $background-color-dark"},"& > [dot]text, £ > [dot]icon ":{"display":"flex","align-items":"center","padding":".8em","transition":"box-shadow $transition-speeds ease"},"& > [dot]icon svg ":{"fill":"$icon-fill","width":"1.6em","height":"1.6em"},"& > [dot]icon ":{"background-color":"$icon-background","justify-content":"center","border-bottom-right-radius":"$border-radius","border-top-right-radius":"$border-radius","box-shadow":"0 .3em 0 0 $icon-dark-background"},"transition":"transform $transition-speeds ease","cursor":"pointer","align-items":"stretch","border-top-right-radius":"$border-radius","&:active [dot]icon ":{"box-shadow":"0 .1em 0 0 $icon-dark-background"},"border-top-left-radius":"$border-radius","font-size":"$font-size"},"js":"","variables":{"icon-background":{"name":"Icon Background","default":"#fff"},"text-color":{"name":"Text Color","default":"#fff"},"background-color-light":{"name":"Background Color Light","default":"#e64970"},"transition-speed":{"name":"Transition Speed","default":".2"},"icon-dark-background":{"name":"Icon Background Dark","default":"#ddd"},"border-radius":{"name":"Border Radius","default":"5px"},"icon-fill":{"name":"Icon Fill","default":"#dc2b4f"},"background-color-dark":{"name":"Background Color Dark","default":"#dc2b4f"},"font-size":{"name":"Font Size","default":"14px"}}},"slug":"icon-button-3d","description":"Button with an icon.. In 3D!","class":"icon-button-3d","animation_info":null,"published_at":"2020-12-14T19:51:47.659Z","createdAt":"2020-12-14T19:51:47.675Z","updatedAt":"2020-12-18T01:34:23.571Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc609c1ea49ce2264c5","ip":"54.198.66.53","published_at":"2020-12-20T23:18:30.478Z","createdAt":"2020-12-20T23:18:30.479Z","updatedAt":"2020-12-20T23:18:30.486Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fdfdbc609c1ea49ce2264c5"},{"_id":"5fdfdeff09c1ea49ce2264cd","ip":"82.34.166.94","published_at":"2020-12-20T23:32:15.615Z","createdAt":"2020-12-20T23:32:15.618Z","updatedAt":"2020-12-20T23:32:15.630Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fdfdeff09c1ea49ce2264cd"},{"_id":"5fdfe22a09c1ea49ce2264d0","ip":"82.34.166.94","published_at":"2020-12-20T23:45:46.639Z","createdAt":"2020-12-20T23:45:46.643Z","updatedAt":"2020-12-20T23:45:46.646Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fdfe22a09c1ea49ce2264d0"},{"_id":"5fe11f6709c1ea49ce2264e1","ip":"82.34.166.94","published_at":"2020-12-21T22:19:19.988Z","createdAt":"2020-12-21T22:19:19.990Z","updatedAt":"2020-12-21T22:19:19.992Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe11f6709c1ea49ce2264e1"},{"_id":"5fe12f47e8119b3251de3de9","ip":"82.34.166.94","published_at":"2020-12-21T23:27:03.472Z","createdAt":"2020-12-21T23:27:03.475Z","updatedAt":"2020-12-21T23:27:03.480Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12f47e8119b3251de3de9"},{"_id":"5fe12f47e8119b3251de3dea","ip":"82.34.166.94","published_at":"2020-12-21T23:27:03.846Z","createdAt":"2020-12-21T23:27:03.849Z","updatedAt":"2020-12-21T23:27:03.852Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12f47e8119b3251de3dea"},{"_id":"5fe12f94e8119b3251de3e04","ip":"34.222.172.161","published_at":"2020-12-21T23:28:20.516Z","createdAt":"2020-12-21T23:28:20.519Z","updatedAt":"2020-12-21T23:28:20.532Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12f94e8119b3251de3e04"},{"_id":"5fe12fbee8119b3251de3e09","ip":"54.183.95.53","published_at":"2020-12-21T23:29:02.769Z","createdAt":"2020-12-21T23:29:02.772Z","updatedAt":"2020-12-21T23:29:02.837Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12fbee8119b3251de3e09"},{"_id":"5fe12fbee8119b3251de3e0a","ip":"52.53.160.19","published_at":"2020-12-21T23:29:02.784Z","createdAt":"2020-12-21T23:29:02.786Z","updatedAt":"2020-12-21T23:29:02.815Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12fbee8119b3251de3e0a"},{"_id":"5fe12fe9e8119b3251de3e14","ip":"54.193.174.92","published_at":"2020-12-21T23:29:45.642Z","createdAt":"2020-12-21T23:29:45.645Z","updatedAt":"2020-12-21T23:29:45.649Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12fe9e8119b3251de3e14"},{"_id":"5fe12feae8119b3251de3e15","ip":"82.34.166.94","published_at":"2020-12-21T23:29:46.331Z","createdAt":"2020-12-21T23:29:46.333Z","updatedAt":"2020-12-21T23:29:46.372Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12feae8119b3251de3e15"},{"_id":"5fe12febe8119b3251de3e19","ip":"3.101.110.106","published_at":"2020-12-21T23:29:47.252Z","createdAt":"2020-12-21T23:29:47.254Z","updatedAt":"2020-12-21T23:29:47.299Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12febe8119b3251de3e19"},{"_id":"5fe12febe8119b3251de3e1d","ip":"3.101.112.111","published_at":"2020-12-21T23:29:47.446Z","createdAt":"2020-12-21T23:29:47.448Z","updatedAt":"2020-12-21T23:29:47.525Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12febe8119b3251de3e1d"},{"_id":"5fe12fefe8119b3251de3e21","ip":"18.144.125.118","published_at":"2020-12-21T23:29:51.384Z","createdAt":"2020-12-21T23:29:51.386Z","updatedAt":"2020-12-21T23:29:51.417Z","__v":0,"component":"5fd7c2538e077f417350ad01","id":"5fe12fefe8119b3251de3e21"}],"id":"5fd7c2538e077f417350ad01"},{"technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fd7c3a08e077f417350ad02","name":"Icon Button","markup":{"html":"<button class=\"icon-button\">\n  <span class=\"text\">Attach</span>\n  <span class=\"icon\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M21.586 10.461l-10.05 10.075c-1.95 1.949-5.122 1.949-7.071 0s-1.95-5.122 0-7.072l10.628-10.585c1.17-1.17 3.073-1.17 4.243 0 1.169 1.17 1.17 3.072 0 4.242l-8.507 8.464c-.39.39-1.024.39-1.414 0s-.39-1.024 0-1.414l7.093-7.05-1.415-1.414-7.093 7.049c-1.172 1.172-1.171 3.073 0 4.244s3.071 1.171 4.242 0l8.507-8.464c.977-.977 1.464-2.256 1.464-3.536 0-2.769-2.246-4.999-5-4.999-1.28 0-2.559.488-3.536 1.465l-10.627 10.583c-1.366 1.368-2.05 3.159-2.05 4.951 0 3.863 3.13 7 7 7 1.792 0 3.583-.684 4.95-2.05l10.05-10.075-1.414-1.414z\"/></svg>\n  </span>\n</button>","css":{"& > [dot]text ":{"line-height":"1","white-space":"nowrap","text-align":"left","min-width":"min-content","text-transform":"uppercase","font-weight":"700","border-bottom-left-radius":"$border-radius","flex":"1","letter-spacing":"1px","background-image":"linear-gradient(180deg, $background-color-dark, $background-color-light)","border-top-left-radius":"$border-radius"},"display":"flex","color":"$text-color","width":"12em","& > [dot]text, £ > [dot]icon ":{"display":"flex","align-items":"center","padding":".75em"},"& > [dot]icon svg ":{"fill":"$icon-fill"},"& > [dot]icon ":{"background-color":"$icon-background","justify-content":"center","border-bottom-right-radius":"$border-radius","border-top-right-radius":"$border-radius"},"cursor":"pointer","align-items":"stretch","font-size":"$font-size"},"js":"","variables":{"background-color-dark":{"name":"Background Color Dark","default":"#c34022"},"background-color-light":{"name":"Background Color Light","default":"#ea5836"},"text-color":{"name":"Text Color","default":"#fff"},"icon-fill":{"name":"Icon Fill","default":"#c34022"},"icon-background":{"name":"Icon Background","default":"#fff"},"border-radius":{"name":"Border Radius","default":"5px"},"font-size":{"name":"Font Size","default":"14px"}}},"slug":"icon-button","description":"Button with a descriptive icon!","class":"icon-button","animation_info":null,"published_at":"2020-12-14T19:57:20.008Z","createdAt":"2020-12-14T19:57:20.014Z","updatedAt":"2020-12-18T01:34:18.061Z","__v":0,"selection":{"index_card_size":"large","technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"id":"5fa8086401988f5a261da25f"},"recent_views":[{"_id":"5fdfdbc709c1ea49ce2264c7","ip":"54.198.66.53","published_at":"2020-12-20T23:18:31.392Z","createdAt":"2020-12-20T23:18:31.395Z","updatedAt":"2020-12-20T23:18:31.399Z","__v":0,"component":"5fd7c3a08e077f417350ad02","id":"5fdfdbc709c1ea49ce2264c7"},{"_id":"5fdfdeff09c1ea49ce2264cb","ip":"82.34.166.94","published_at":"2020-12-20T23:32:15.549Z","createdAt":"2020-12-20T23:32:15.575Z","updatedAt":"2020-12-20T23:32:15.609Z","__v":0,"component":"5fd7c3a08e077f417350ad02","id":"5fdfdeff09c1ea49ce2264cb"},{"_id":"5fe11f6809c1ea49ce2264e3","ip":"82.34.166.94","published_at":"2020-12-21T22:19:20.014Z","createdAt":"2020-12-21T22:19:20.016Z","updatedAt":"2020-12-21T22:19:20.047Z","__v":0,"component":"5fd7c3a08e077f417350ad02","id":"5fe11f6809c1ea49ce2264e3"},{"_id":"5fe12f94e8119b3251de3e05","ip":"34.222.172.161","published_at":"2020-12-21T23:28:20.745Z","createdAt":"2020-12-21T23:28:20.748Z","updatedAt":"2020-12-21T23:28:20.752Z","__v":0,"component":"5fd7c3a08e077f417350ad02","id":"5fe12f94e8119b3251de3e05"},{"_id":"5fe12fbee8119b3251de3e0e","ip":"204.236.183.252","published_at":"2020-12-21T23:29:02.966Z","createdAt":"2020-12-21T23:29:02.968Z","updatedAt":"2020-12-21T23:29:02.989Z","__v":0,"component":"5fd7c3a08e077f417350ad02","id":"5fe12fbee8119b3251de3e0e"},{"_id":"5fe12fe9e8119b3251de3e12","ip":"13.57.246.129","published_at":"2020-12-21T23:29:45.204Z","createdAt":"2020-12-21T23:29:45.206Z","updatedAt":"2020-12-21T23:29:45.282Z","__v":0,"component":"5fd7c3a08e077f417350ad02","id":"5fe12fe9e8119b3251de3e12"},{"_id":"5fe12feae8119b3251de3e16","ip":"54.183.52.61","published_at":"2020-12-21T23:29:46.436Z","createdAt":"2020-12-21T23:29:46.438Z","updatedAt":"2020-12-21T23:29:46.489Z","__v":0,"component":"5fd7c3a08e077f417350ad02","id":"5fe12feae8119b3251de3e16"},{"_id":"5fe12febe8119b3251de3e1b","ip":"13.57.246.129","published_at":"2020-12-21T23:29:47.304Z","createdAt":"2020-12-21T23:29:47.306Z","updatedAt":"2020-12-21T23:29:47.349Z","__v":0,"component":"5fd7c3a08e077f417350ad02","id":"5fe12febe8119b3251de3e1b"}],"id":"5fd7c3a08e077f417350ad02"}],"selection":[{"index_card_size":"large","technologies":[{"_id":"5fa9da3c634a2308e08df666","name":"HTML","color":"red","published_at":"2020-11-10T00:09:34.674Z","createdAt":"2020-11-10T00:09:32.223Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da3c634a2308e08df666"},{"_id":"5fa9da45634a2308e08df667","name":"CSS","color":"yellow","published_at":"2020-11-10T00:11:37.846Z","createdAt":"2020-11-10T00:09:41.016Z","updatedAt":"2020-11-18T12:02:26.936Z","__v":0,"component":"5fae59b58c82a810431ab07f","id":"5fa9da45634a2308e08df667"}],"_id":"5fa8086401988f5a261da25f","name":"Button","published_at":"2020-11-08T15:01:58.097Z","createdAt":"2020-11-08T15:01:56.058Z","updatedAt":"2020-11-20T13:02:42.504Z","__v":0,"slug":"buttons","html_tag":"button","description":"Here you will find a list of button components with various :hover & :active states. Click on a button to further investigate the genetic makeup of this component!","teaser":"View a selection of breathtaking button components that could be used in your next project!","card_size":"small","columns":3,"components":[{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fa9bdb0cecec44f1e74c8e4","markup":{"html":"<button class='root'>CSSLab</button>","css":{"background-size":"220%","box-shadow":"0 .2em .3em rgba(0, 0, 0, 0.15)","color":"$hover-background-col$","background-color":"transparent","&:hover":{"transform":"translateY(-2px)","box-shadow":"0 0 .3em rgba(0, 0, 0, 0.25)","background-position":"0","color":"#fff"},"background-position":"100%","border":"3px solid $hover-background-col$","text-transform":"uppercase","padding":"8px 16px","border-radius":"3px","transition":"all .2s ease-out","font-weight":"900","cursor":"pointer","&:active":{"transform":"translateY(-1px)"},"letter-spacing":"2px","background-image":"linear-gradient($gradient-angle$, $hover-background-col$ 0%, $hover-background-col$ 50%, $initial-background-col$ 50%, $initial-background-col$ 100%)","font-size":"14px"},"variables":{"initial-background-col":{"name":"Initial Background Color","default":"transparent"},"hover-background-col":{"name":"Hover Background Color","default":"#3363ff"},"gradient-angle":{"name":"Gradient Angle","default":"110deg"}}},"name":"Angled Gradient Button","slug":"angled-gradient-button","published_at":"2020-11-09T22:08:11.106Z","createdAt":"2020-11-09T22:07:44.149Z","updatedAt":"2020-11-30T21:59:22.998Z","__v":0,"selection":"5fa8086401988f5a261da25f","class":"angled-gradient-button","description":"A beautiful button with a slanted gradient hover state","id":"5fa9bdb0cecec44f1e74c8e4"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fac44877e05a73bd2b49963","name":"3D Push Button","markup":{"html":"<buton class=\"root\">CSSLab</button>","css":{"box-shadow":" 0 4px $col-border$","color":"$col-text","background-color":"$col-background","text-transform":"uppercase","padding":"10px 20px","border-radius":"5px","transition":"all .2s ease","font-weight":"900","cursor":"pointer","&:active":{"box-shadow":" 0 1px $col-border$","transform":"translateY(3px)"},"letter-spacing":"1px"},"variables":{"col-background":{"name":"Background Color","default":"#ffd95e"},"col-border":{"name":"Border Color","default":"#c1a23c"},"col-text":{"name":"Text Color","default":"#5e4800"}}},"slug":"3d-push-button","description":"3D Button with a pushing active state","published_at":"2020-11-11T20:07:35.741Z","createdAt":"2020-11-11T20:07:35.747Z","updatedAt":"2020-11-30T22:28:26.576Z","__v":0,"selection":"5fa8086401988f5a261da25f","class":"push-button-3d","id":"5fac44877e05a73bd2b49963"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fad5ccb8c82a810431ab077","name":"Suduko","markup":{"html":"<button class=\"root\">Sudoku</button>","css":{"font-family":"serif","color":"$text-col","background-color":"$background-col","&:hover":{"letter-spacing":"3px","color":"$background-col","background":"$text-col"},"border":".1em solid $background-col","text-transform":"lowercase","padding":".5em 2em","border-radius":"5px","font-style":" italic","transition":"all .5s ease","cursor":"pointer","font-size":"2rem"},"variables":{"background-col":{"name":"Background Color","default":"#222"},"text-col":{"name":"Text Color","default":"#fff"}}},"slug":"suduko","description":"Enlarging letter space on hover","class":"elite","published_at":"2020-11-12T16:03:23.525Z","createdAt":"2020-11-12T16:03:23.534Z","updatedAt":"2020-11-20T13:19:08.944Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fad5ccb8c82a810431ab077"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fad8f178c82a810431ab07a","name":"Borderman","markup":{"html":"<button class=\"root btn-border\">CSSLab</button>","css":{"display":" inline-block","&[dot]btn-border:before,\n  £[dot]btn-border:after ":{"content":" ''","border-style":" solid","position":" absolute","z-index":" 5","border-radius":" $border-radius","box-sizing":" content-box","transition":" all 0.3s"},"position":" relative","&[dot]btn-border:hover:after":{"height":" calc(100% + ($border-width * 2))","border-color":"$hover-border-color"},"opacity":" .999","&[dot]btn-border:before ":{"width":" 0","height":" 100%","border-width":" $border-width 0 $border-width 0","top":" -$border-width","left":" -$border-width","transition-delay":" 0.05s"},"margin":" .3em","padding":" .5em 1.5em","&[dot]btn-border:hover:before":{"width":" calc(100% + ($border-width * 2))","border-color":"$hover-border-color"},"border-radius":" $border-radius","transition":" all 0.3s","cursor":"pointer","&[dot]btn-border:hover ":{"color":"$hover-text-color"},"&[dot]btn-border:after ":{"width":" 100%","height":" 0","border-width":" 0 $border-width 0 $border-width","top":" -$border-width","left":" -$border-width"},"&[dot]btn-border ":{"background-color":" transparent","border":" $border-width solid $initial-border-color","color":"$initial-text-color","font-weight":"400"},"font-size":"2rem"},"variables":{"initial-border-color":{"name":"Initial Border Color","default":"rgba(0,0,0,.2)"},"initial-text-color":{"name":"Initial Text Color","default":"#999"},"hover-text-color":{"name":"Hover Text Color","default":"#9b59b6"},"hover-border-color":{"name":"Hover Border Color","default":"#9b59b6"},"border-width":{"name":"Border Width","default":"2px"},"border-radius":{"name":"Border Radius","default":"3px"}}},"slug":"borderman","description":"Colorful border animation","class":"borderman","published_at":"2020-11-12T19:37:59.780Z","createdAt":"2020-11-12T19:37:59.784Z","updatedAt":"2020-11-20T13:02:42.503Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fad8f178c82a810431ab07a"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fada9748c82a810431ab07b","name":"Blobby Button","markup":{"html":"<button class=\"blobby-button\">\n  CSSLab\n  <span class=\"inner\">\n  <span class=\"blobs\">\n    <span class=\"blob\"></span>\n    <span class=\"blob\"></span>\n    <span class=\"blob\"></span>\n    <span class=\"blob\"></span>\n    </span>\n  </span>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n    <defs>\n      <filter id=\"goo\">\n        <feGaussianBlur in=\"SourceGraphic\" result=\"blur\" stdDeviation=\"10\"></feGaussianBlur>\n        <feColorMatrix in=\"blur\" mode=\"matrix\" values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7\" result=\"goo\"></feColorMatrix>\n        <feBlend in2=\"goo\" in=\"SourceGraphic\" result=\"mix\"></feBlend>\n      </filter>\n    </defs>\n  </svg>\n</button>","css":{"& [dot]blobs":{"position":" relative","display":" block","height":" 100%","filter":" url('#goo')"},"overflow":"hidden","outline":"none","display":"flex","color":" $button-color","background-color":" transparent","text-align":"center","& [dot]blob:nth-child(1) ":{"left":"0","transition-delay":"0"},"position":" relative","& [dot]blob:nth-child(2) ":{"left":"calc(120% / 4)","transition-delay":"calc(($transition-duration * .12) * 1)"},"& [dot]blob:nth-child(3) ":{"left":"calc(2 * (120% / 4))","transition-delay":"calc(($transition-duration * .12) * 2)"},"border":"none","&:hover [dot]blob ":{"transform":" translateZ(0) scale(1.7)"},"& [dot]blob:nth-child(4) ":{"left":"calc(3 * (120% / 4))","transition-delay":"calc(($transition-duration * .12) * 3)"},"&:before ":{"width":" 100%","left":" 0","height":" 100%","position":" absolute","border":" 3px solid $border-color","border-radius":"4px","top":" 0","content":" \"\"","z-index":" 1"},"padding":"1em 2em","& [dot]blob":{"position":" absolute","top":" 3px","width":" calc(100% / $number-of-blobs)","height":" 100%","background":" $button-color","border-radius":" 100%","transform":" translate3d(0,150%,0) scale(1.7)","transition":" transform $transition-duration"},"border-radius":"4px","transition":" color calc($transition-duration * .75)","font-weight":" 900","cursor":" pointer","&:hover ":{"color":"#fff"},"& > svg ":{"display":"none"},"align-items":"center","letter-spacing":"2px","justify-content":"center","z-index":" 1","font-size":" 16px","& [dot]inner ":{"z-index":" -1","overflow":" hidden","position":" absolute","left":" 0","top":" 0","width":" 100%","height":" 100%"}},"variables":{"border-color":{"name":"Border Color","default":"#9a02ff"},"text-color":{"name":"Text Color","default":"#9a02ff"},"button-color":{"name":"Hover Background Color","default":"#9a02ff"},"number-of-blobs":{"name":"Blob Spacing","default":"4"},"transition-duration":{"name":"Transition Duration","default":"0.5s"}}},"slug":"blobby-button","description":"A button with blobs flowing up on hover","class":"blobby-button","published_at":"2020-11-12T21:30:28.646Z","createdAt":"2020-11-12T21:30:28.666Z","updatedAt":"2020-11-20T13:18:01.767Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fada9748c82a810431ab07b"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fae59b58c82a810431ab07f","name":"Outpulser","markup":{"html":"<button class=\"root\">\n  <span>Outpulser</span>\n</button>","css":{"color":"$col-text","background-color":"$col-background","text-align":" center","position":" relative","&::after ":{"width":" 100%","left":" 0","height":" 100%","position":" absolute","opacity":" 0","border":" $border-width solid $col-hover-border","transform":" scale(1.2)","border-radius":"$border-radius","top":" 0","transition":" all $transition-speed","content":" ''","z-index":" 1"},"&:hover::after ":{"opacity":" 1","transform":" scale(1)"},"padding":".5em 1em","border-radius":"$border-radius","transition":" all $transition-speed","cursor":" pointer","&:hover ":{"transform":"scale(1.1)","box-shadow":"0 .2em .5em rgba(0,0,0,.3)"},"&:hover::before ":{"opacity":"0","transform":" scale(0)"},"&::before ":{"background-color":" $col-hover-background-overlay","width":" 100%","left":" 0","height":" 100%","position":" absolute","opacity":".2","transform":" scale(1)","border-radius":"$border-radius","top":" 0","transition":" all $transition-speed","content":" ''","z-index":" 1"},"&:focus ":{"outline":"none"},"-webkit-backface-visibility":" hidden","user-select":"none","font-size":"1.2em"},"variables":{"col-background":{"name":"Background Color","default":"#66A182"},"col-hover-background-overlay":{"name":"Hover Background Overlay","default":"#fff"},"col-text":{"name":"Text Color","default":"#fff"},"col-hover-border":{"name":"Hover Border Color","default":"#27513b"},"border-width":{"name":"Border Width","default":"2px"},"border-radius":{"name":"Border Radius","default":"3px"},"transition-speed":{"name":"Transition Speed","default":"0.3s"}}},"slug":"Outpulser","description":"Button with an outwards pulse animation","class":"outpulser","published_at":"2020-11-13T10:02:29.911Z","createdAt":"2020-11-13T10:02:29.917Z","updatedAt":"2020-11-30T22:29:50.544Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fae59b58c82a810431ab07f"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fae5afb8c82a810431ab080","name":"Inpulser","markup":{"html":"<button class=\"root\">\n  <span>Inpulser</span>\n</button>","css":{"outline":"none","color":"$col-text","background-color":"$col-background","text-align":" center","position":" relative","&::after ":{"width":" 100%","left":" 0","height":" 100%","position":" absolute","opacity":" 0","border":" $border-width solid $col-hover-border","transform":" scale(1.2)","border-radius":"$border-radius","top":" 0","transition":" all $transition-speeds","content":" ''","z-index":" 1"},"&:hover::after ":{"opacity":" 1","transform":" scale(1)"},"padding":".5em 1em","border-radius":"$border-radius","transition":" all $transition-speeds","cursor":" pointer","&:hover ":{"transform":"scale(1.1)","box-shadow":"0 .2em .5em rgba(0,0,0,.3)"},"&:hover::before ":{"opacity":"0","transform":" scale(1)"},"&::before ":{"background-color":" $col-hover-background-overlay","width":" 100%","left":" 0","height":" 100%","position":" absolute","opacity":"$initial-overlay-strength","transform":" scale(0)","border-radius":"$border-radius","top":" 0","transition":" all $transition-speeds","content":" ''","z-index":" 1"},"&:focus ":{"outline":"none"},"-webkit-backface-visibility":" hidden","user-select":"none","font-size":"1.2em"},"variables":{"col-background":{"name":"Background Color","default":"#ff6766"},"col-hover-background-overlay":{"name":"Overlay Color (translucent)","default":"#fff"},"initial-overlay-strength":{"name":"Initial Overlay Strength","default":".5"},"col-text":{"name":"Text Color","default":"#fff"},"col-hover-border":{"name":"Hover Border Color","default":"#cd4746"},"border-width":{"name":"Hover Border Width","default":"2px"},"border-radius":{"name":"Border Radius","default":"3px"},"transition-speed":{"name":"Transition Speed","default":"0.3"}}},"slug":"inpulser","description":"Button with an inwards pulse animation","class":"inpulser","published_at":"2020-11-13T10:07:55.132Z","createdAt":"2020-11-13T10:07:55.149Z","updatedAt":"2020-12-05T14:48:20.649Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fae5afb8c82a810431ab080"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fb0131e14cf992bfd6ab468","name":"Animated Close Button","markup":{"html":"<button class=\"root\">\n  <span class=\"text\">CSSLab</span>\n  <div class=\"icons\">\n    <div class=\"cross\"></div>\n    <div class=\"check\"></div>\n  </div>\n</button>","css":{"& > [dot]text ":{"padding-right":"1.5em","display":"block","position":"relative","text-transform":"uppercase","padding":".5em 1em","transition":"all $transition-speeds ease-out","font-weight":"700","border-right":"2px solid rgba(255,255,255,.1)","letter-spacing":"1px","margin-right":"3em","font-size":"13px"},"overflow":"hidden","color":"$text-color","background-color":"$background-color","position":" relative","& [dot]cross::after, £ [dot]cross::before ":{"display":"block","background-color":"$text-color","margin-left":"auto","width":"1em","left":"0","height":".2em","position":"absolute","transition":"all $transition-speeds ease-out","content":"\"\"","right":"0","margin-right":"auto"},"& [dot]cross::after ":{"transform":"rotate(45deg)"},"padding":".75rem 1rem","border-radius":"4px","transition":"all $transition-speeds ease-out","& [dot]cross ":{"margin-top":"-2px"},"& [dot]cross::before ":{"transform":"rotate(-45deg)"},"cursor":"pointer","&:hover ":{"background-color":"$background-hover-color"},"& > [dot]icons ":{"display":"flex","width":"3em","height":"100%","position":"absolute","flex-direction":"column","top":"0","transition":"all $transition-speeds ease-out","align-items":"center","right":"0","justify-content":"center"},"&:hover [dot]text ":{"transform":"translateX(calc(-100% - 3em))"},"&:hover [dot]icons ":{"width":"100%","transform":"scale(1.3)"}},"variables":{"background-color":{"name":"Background Color","default":"#b60000"},"background-hover-color":{"name":"Background Hover Color","default":"#c44346"},"text-color":{"name":"Text Color","default":"#fff"},"transition-speed":{"name":"Transition Speed","default":"0.15"}}},"slug":"animated-close-button","description":"Close button animated with a hover state transition","class":"close-button","published_at":"2020-11-14T17:25:49.997Z","createdAt":"2020-11-14T17:25:50.018Z","updatedAt":"2020-11-20T13:02:42.503Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fb0131e14cf992bfd6ab468"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fb53bf00d227153f2534a57","name":"Rotating Cuboid 3d","markup":{"html":"<button class=\"root\">\n  <div class=\"face face-front\">\n  <span>Front</span>\n  </div>\n  <div class=\"face face-back\">\n <span>Back</span>\n </div>\n</button>","css":{"&:hover [dot]face-back":{"transform":" rotateX(0deg)","z-index":"3"},"& [dot]face-back":{"background-color":"$back-background-color","color":"$back-text-color","transform":" rotateX(90deg)","transform-origin":" 50% 50% calc(-$size * 1.5)","z-index":"1"},"text-align":" center","width":" 10em","height":" 2.75em","border":" 0","margin":" 0","& [dot]face-front":{"color":"$front-text-color","background-color":"$front-background-color","transform":" rotateX(0deg)","transform-origin":" 50% 50% calc(-$size * 1.5)","z-index":"2"},"&:hover [dot]face-front":{"transform":" rotateX(-90deg)"},"& [dot]face":{"box-sizing":"content-box","display":"flex","text-align":" center","width":" 100%","height":" 2.75em","position":" absolute","pointer-events":" none","border":" $border-color solid $border-width","transition":" all $transform-durations ease","margin-top":" -25px","align-items":"center","justify-content":"center"},"cursor":"pointer","& span ":{"text-transform":"uppercase","font-weight":"900","letter-spacing":"1px","font-size":".9em"},"perspective":" 500px","font-size":"$size"},"js":"","variables":{"front-background-color":{"name":"Front Background Color","default":"#FFAEA5"},"front-text-color":{"name":"Front Text Color","default":"#9c574f"},"back-background-color":{"name":"Back Background Color","default":"#8FCACA"},"back-text-color":{"name":"Back Text Color","default":"#3F7575"},"border-width":{"name":"Border Width","default":"2px"},"border-color":{"name":"Border Color","default":"rgba(0,0,0,.2)"},"size":{"name":"Size","default":"16px"},"transform-duration":{"name":"Transform Duration","default":".2"}}},"slug":"rotating-cuboid-3d","description":"Cuboid that rotates 90 degrees!","class":"rotating-cuboid-3d","published_at":"2020-11-18T15:21:20.196Z","createdAt":"2020-11-18T15:21:20.218Z","updatedAt":"2020-11-20T13:02:42.503Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fb53bf00d227153f2534a57"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fc55f7e70a4a36fc29da74a","name":"Reflective Glass","markup":{"html":"<button class=\"root\">CSSLab</button>","css":{"overflow":"hidden","box-shadow":"inset 0 0 .5rem .3rem rgba(255,255,255, 0)","color":"$text-color","background-color":"$background-color","position":"relative","border":" 2px solid $border-color","text-transform":"uppercase","padding":"10px 25px","border-radius":"$border-radius","transition":"all $transition-speed ease","font-weight":"bold","cursor":"pointer","&:hover ":{"box-shadow":"inset 0 0 1rem 0 rgba(218, 218, 218, 0.4)","color":"$text-color"},"&:hover::before ":{"left":"-100%"},"&::before ":{"content":"\"\"","position":"absolute","top":"0","left":"100%","width":"100%","height":"100%","background":" linear-gradient(120deg, transparent, rgba(218, 218, 218, 0.4), transparent)","transition":"all $transition-speed ease"},"letter-spacing":"1px","font-size":"16px"},"js":"","variables":{"transition-speed":{"name":"Transition Speed","default":".25s"},"border-color":{"name":"Border Color","default":"rgba(0,0,0,.3)"},"border-radius":{"name":"Border Radius","default":"3px"},"text-color":{"name":"Text Color","default":"#fff"},"background-color":{"name":"Background Color","default":"darkred"}}},"slug":"reflective-glass","description":"Pimp out your application with this reflective button!","class":"reflective","animation_info":null,"published_at":"2020-11-30T21:09:18.254Z","createdAt":"2020-11-30T21:09:18.272Z","updatedAt":"2020-12-18T01:35:44.207Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fc55f7e70a4a36fc29da74a"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fc5645670a4a36fc29da74b","name":"Rotating 3D Button","markup":{"html":"<button class=\"root\">CSSLab</button>","css":{"box-shadow":" 0 2px 2px rgba(0,0,0,.2),\n    inset 0 0 20px 10px rgba(0,0,0,.1)","color":"$text-color","background-color":"$background-color","padding":"12px 25px","transition":"all $transition-speed ease","font-weight":"bold","cursor":"pointer","&:hover ":{"transform":"scale($scaling) rotate($rotation-degrees)","box-shadow":" -3px 2px 10px rgba(0,0,0,.5),\n       inset 0 0 20px 10px rgba(0,0,0,.1)"},"letter-spacing":"1px","font-size":"18px"},"js":"","variables":{"background-color":{"name":"Background Color","default":"hotpink"},"text-color":{"name":"Text Color","default":"#fff"},"rotation-degrees":{"name":"Rotation Degrees","default":"8deg"},"scaling":{"name":"Scaling","default":"1.2"},"transition-speed":{"name":"Transition Speed","default":".5s"}}},"slug":"rotating-button","description":"3D button with rotation & scalling properties!","class":"rotated-button","animation_info":null,"published_at":"2020-11-30T21:29:58.005Z","createdAt":"2020-11-30T21:29:58.011Z","updatedAt":"2020-12-18T01:35:49.249Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fc5645670a4a36fc29da74b"},{"technologies":[],"_id":"5fcfe9938e077f417350acfe","name":"Arrow Link","markup":{"html":"<a class=\"arrow-link\">See more<span class=\"arrow\"></span></a>","css":{"display":"flex","color":"$text-color","background-color":"transparent","& > [dot]arrow ":{"width":"8px","height":"8px","border-right":"$arrow-thickness solid $text-color","border-bottom":"$arrow-thickness solid $text-color","position":"relative","transform":"rotate(-45deg)","margin-left":"3px","transition":"all $transition-speed ease"},"& > [dot]arrow::before ":{"display":"block","background-color":"$text-hover-color","width":"3px","transform-origin":"bottom right","height":"$arrow-thickness","position":"absolute","opacity":"0","bottom":"calc(-$arrow-thickness / 2)","transform":"rotate(45deg)","transition":"all $transition-speed ease","content":"\"\"","right":"0"},"text-transform":"uppercase","&:hover > [dot]arrow ":{"transform":"rotate(-45deg) translate(4px, 4px)","border-color":"$text-hover-color"},"&:hover > [dot]arrow::before ":{"opacity":"1","width":"$arrow-width"},"transition":"all $transition-speed ease","font-weight":"bold","cursor":"pointer","&:hover ":{"color":"$text-hover-color"},"align-items":"center","letter-spacing":"1px","font-size":"14px"},"js":"","variables":{"text-color":{"name":"Text Color","default":"salmon"},"text-hover-color":{"name":"Text Hover Color","default":"#D95E39"},"arrow-thickness":{"name":"Arrow Thickness","default":"2px"},"arrow-width":{"name":"Arrow Width","default":"8px"},"transition-speed":{"name":"Transition Speed","default":".3s"}}},"slug":"arrow-link","description":"Inline link with arrow hover animation","class":"arrow-link","animation_info":null,"published_at":"2020-12-08T21:01:07.951Z","createdAt":"2020-12-08T21:01:07.976Z","updatedAt":"2020-12-08T21:08:57.075Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fcfe9938e077f417350acfe"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fcfeb238e077f417350acff","name":"Arrow Button","markup":{"html":"<button class=\"arrow-button\">See more<span class=\"arrow\"></span></button>","css":{"display":"flex","color":"$text-color","background-color":"$background-color","& > [dot]arrow ":{"width":"6px","height":"6px","border-right":"$arrow-thickness solid $text-color","border-bottom":"$arrow-thickness solid $text-color","position":"relative","transform":"rotate(-45deg)","margin":"0 6px","transition":"all $transition-speeds ease"},"& > [dot]arrow::before ":{"display":"block","background-color":"currentColor","width":"3px","transform-origin":"bottom right","height":"$arrow-thickness","position":"absolute","opacity":"0","bottom":"calc(-$arrow-thickness / 2)","transform":"rotate(45deg)","transition":"all $transition-speeds ease","content":"\"\"","right":"0"},"&:hover > [dot]arrow ":{"transform":"rotate(-45deg) translate(4px, 4px)","border-color":"$text-hover-color"},"&:hover > [dot]arrow::before ":{"opacity":"1","width":"$arrow-width"},"padding":"10px 16px","border-radius":"20px","transition":"all $transition-speeds ease","font-weight":"bold","cursor":"pointer","&:hover ":{"background-color":"$background-hover-color","color":"#fff"},"align-items":"center","font-size":"14px"},"js":"","variables":{"background-color":{"name":"Background Color","default":"#00E692"},"background-hover-color":{"name":"Background Hover Color","default":"#017A4F"},"text-color":{"name":"Text Color","default":"#C2FFE9"},"arrow-thickness":{"name":"Arrow Thickness","default":"2px"},"arrow-width":{"name":"Arrow Width","default":"8px"},"transition-speed":{"name":"Transition Speed","default":".3"}}},"slug":"arrow-button","description":"Solid button with arrow hover animation","class":"arrow-button","animation_info":null,"published_at":"2020-12-08T21:07:47.165Z","createdAt":"2020-12-08T21:07:47.192Z","updatedAt":"2020-12-18T01:34:28.570Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fcfeb238e077f417350acff"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fd7c2538e077f417350ad01","name":"Icon Button 3D","markup":{"html":"<button class=\"icon-button-3d\">\n  <span class=\"text\">View More</span>\n  <span class=\"icon\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 4.706c-2.938-1.83-7.416-2.566-12-2.706v17.714c3.937.12 7.795.681 10.667 1.995.846.388 1.817.388 2.667 0 2.872-1.314 6.729-1.875 10.666-1.995v-17.714c-4.584.14-9.062.876-12 2.706zm-10 13.104v-13.704c5.157.389 7.527 1.463 9 2.334v13.168c-1.525-.546-4.716-1.504-9-1.798zm20 0c-4.283.293-7.475 1.252-9 1.799v-13.171c1.453-.861 3.83-1.942 9-2.332v13.704zm-2-10.214c-2.086.312-4.451 1.023-6 1.672v-1.064c1.668-.622 3.881-1.315 6-1.626v1.018zm0 3.055c-2.119.311-4.332 1.004-6 1.626v1.064c1.549-.649 3.914-1.361 6-1.673v-1.017zm0-2.031c-2.119.311-4.332 1.004-6 1.626v1.064c1.549-.649 3.914-1.361 6-1.673v-1.017zm0 6.093c-2.119.311-4.332 1.004-6 1.626v1.064c1.549-.649 3.914-1.361 6-1.673v-1.017zm0-2.031c-2.119.311-4.332 1.004-6 1.626v1.064c1.549-.649 3.914-1.361 6-1.673v-1.017zm-16-6.104c2.119.311 4.332 1.004 6 1.626v1.064c-1.549-.649-3.914-1.361-6-1.672v-1.018zm0 5.09c2.086.312 4.451 1.023 6 1.673v-1.064c-1.668-.622-3.881-1.315-6-1.626v1.017zm0-2.031c2.086.312 4.451 1.023 6 1.673v-1.064c-1.668-.622-3.881-1.316-6-1.626v1.017zm0 6.093c2.086.312 4.451 1.023 6 1.673v-1.064c-1.668-.622-3.881-1.315-6-1.626v1.017zm0-2.031c2.086.312 4.451 1.023 6 1.673v-1.064c-1.668-.622-3.881-1.315-6-1.626v1.017z\"/></svg>\n  </span>\n</button>","css":{"& > [dot]text ":{"line-height":"1","white-space":"nowrap","box-shadow":"0 .3em 0 0 $background-color-dark","text-align":"left","min-width":"min-content","text-transform":"uppercase","font-weight":"600","border-bottom-left-radius":"$border-radius","flex":"1","letter-spacing":"1px","background-image":"linear-gradient(180deg, $background-color-dark, $background-color-light)","border-top-left-radius":"$border-radius"},"display":"flex","box-shadow":"0 0 3px rgba(0,0,0,.1)","color":"$text-color","background-color":"transparent","width":"12em","&:active ":{"transform":"translateY(.2em)"},"&:active [dot]text ":{"box-shadow":"0 .1em 0 0 $background-color-dark"},"& > [dot]text, £ > [dot]icon ":{"display":"flex","align-items":"center","padding":".8em","transition":"box-shadow $transition-speeds ease"},"& > [dot]icon svg ":{"fill":"$icon-fill","width":"1.6em","height":"1.6em"},"& > [dot]icon ":{"background-color":"$icon-background","justify-content":"center","border-bottom-right-radius":"$border-radius","border-top-right-radius":"$border-radius","box-shadow":"0 .3em 0 0 $icon-dark-background"},"transition":"transform $transition-speeds ease","cursor":"pointer","align-items":"stretch","border-top-right-radius":"$border-radius","&:active [dot]icon ":{"box-shadow":"0 .1em 0 0 $icon-dark-background"},"border-top-left-radius":"$border-radius","font-size":"$font-size"},"js":"","variables":{"icon-background":{"name":"Icon Background","default":"#fff"},"text-color":{"name":"Text Color","default":"#fff"},"background-color-light":{"name":"Background Color Light","default":"#e64970"},"transition-speed":{"name":"Transition Speed","default":".2"},"icon-dark-background":{"name":"Icon Background Dark","default":"#ddd"},"border-radius":{"name":"Border Radius","default":"5px"},"icon-fill":{"name":"Icon Fill","default":"#dc2b4f"},"background-color-dark":{"name":"Background Color Dark","default":"#dc2b4f"},"font-size":{"name":"Font Size","default":"14px"}}},"slug":"icon-button-3d","description":"Button with an icon.. In 3D!","class":"icon-button-3d","animation_info":null,"published_at":"2020-12-14T19:51:47.659Z","createdAt":"2020-12-14T19:51:47.675Z","updatedAt":"2020-12-18T01:34:23.571Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fd7c2538e077f417350ad01"},{"technologies":["5fa9da3c634a2308e08df666","5fa9da45634a2308e08df667"],"_id":"5fd7c3a08e077f417350ad02","name":"Icon Button","markup":{"html":"<button class=\"icon-button\">\n  <span class=\"text\">Attach</span>\n  <span class=\"icon\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M21.586 10.461l-10.05 10.075c-1.95 1.949-5.122 1.949-7.071 0s-1.95-5.122 0-7.072l10.628-10.585c1.17-1.17 3.073-1.17 4.243 0 1.169 1.17 1.17 3.072 0 4.242l-8.507 8.464c-.39.39-1.024.39-1.414 0s-.39-1.024 0-1.414l7.093-7.05-1.415-1.414-7.093 7.049c-1.172 1.172-1.171 3.073 0 4.244s3.071 1.171 4.242 0l8.507-8.464c.977-.977 1.464-2.256 1.464-3.536 0-2.769-2.246-4.999-5-4.999-1.28 0-2.559.488-3.536 1.465l-10.627 10.583c-1.366 1.368-2.05 3.159-2.05 4.951 0 3.863 3.13 7 7 7 1.792 0 3.583-.684 4.95-2.05l10.05-10.075-1.414-1.414z\"/></svg>\n  </span>\n</button>","css":{"& > [dot]text ":{"line-height":"1","white-space":"nowrap","text-align":"left","min-width":"min-content","text-transform":"uppercase","font-weight":"700","border-bottom-left-radius":"$border-radius","flex":"1","letter-spacing":"1px","background-image":"linear-gradient(180deg, $background-color-dark, $background-color-light)","border-top-left-radius":"$border-radius"},"display":"flex","color":"$text-color","width":"12em","& > [dot]text, £ > [dot]icon ":{"display":"flex","align-items":"center","padding":".75em"},"& > [dot]icon svg ":{"fill":"$icon-fill"},"& > [dot]icon ":{"background-color":"$icon-background","justify-content":"center","border-bottom-right-radius":"$border-radius","border-top-right-radius":"$border-radius"},"cursor":"pointer","align-items":"stretch","font-size":"$font-size"},"js":"","variables":{"background-color-dark":{"name":"Background Color Dark","default":"#c34022"},"background-color-light":{"name":"Background Color Light","default":"#ea5836"},"text-color":{"name":"Text Color","default":"#fff"},"icon-fill":{"name":"Icon Fill","default":"#c34022"},"icon-background":{"name":"Icon Background","default":"#fff"},"border-radius":{"name":"Border Radius","default":"5px"},"font-size":{"name":"Font Size","default":"14px"}}},"slug":"icon-button","description":"Button with a descriptive icon!","class":"icon-button","animation_info":null,"published_at":"2020-12-14T19:57:20.008Z","createdAt":"2020-12-14T19:57:20.014Z","updatedAt":"2020-12-18T01:34:18.061Z","__v":0,"selection":"5fa8086401988f5a261da25f","id":"5fd7c3a08e077f417350ad02"}],"id":"5fa8086401988f5a261da25f"}]},"__N_SSG":true}