Jan 10, 2018
Description Text
Extra Text
12.50
Post Info
It is on a file in the HbG/basic folder, and can display custom html.
body { background: #e0e5ec; } h1 { position: relative; text-align: center; color: #353535; font-size: 40px; font-family: "Cormorant Garamond", serif; } h1:before { position: absolute; content: ""; bottom: -10px; width: 35%; height: 2px; background-color: #98d9e1; background-image: linear-gradient(315deg, #fea 0%, #a95 74%); } p { font-family: 'Lato', sans-serif; font-weight: 300; text-align: center; font-size: 16px; color: #676767; } .frame { width: 90%; margin: 2px auto; text-align: center; } button { margin: 10px; } .custom-btn { width: 120px; height: 40px; color: #fff; border-radius: 5px; padding: 10px 20px; font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 900; font-style: normal; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4); text-decoration: none; background: transparent; cursor: pointer; position: relative; display: inline-block; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.3); outline: none; border: 1px solid #ba6; } .custom-btn:active { -webkit-transform: translateY(2px); transform: translateY(2px); } /* 1 */ .btn-1 { backface-visibility: hidden; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; background: linear-gradient(180deg, #fea 0%, #dc8 49%, #a95 51%, #dc8 100%); border-radius: 5px; } /* 2 */ .btn-2 { background: linear-gradient(top, #a95, #f2f2f2 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, #a95); background: -webkit-linear-gradient(top, #a95, #fea 25%, #ffffff 38%, #dc8 63%, #fea 87%, #a95); } /* 3 */ .btn-3 { background: -webkit-gradient(linear, left top, left bottom, from(#a95), to(#fea)); } /* 4 */ .btn-4 { color: #fff; background-image: -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) 3%, rgba(255, 238, 170, .1) 3.75%), -webkit-repeating-linear-gradient(left, rgba(170, 153, 85, 0) 0%, rgba(170, 153, 85, 0) 2%, rgba(170, 153, 85, .03) 2.25%), -webkit-repeating-linear-gradient(left, rgba(255, 238, 170, 0) 0%, rgba(255, 238, 170, 0) .6%, rgba(255, 238, 170, .15) 1.2%), linear-gradient(180deg, #a95 0%, #fea 47%, #dc8 53%, #fea 100%); } /* 5 */ .btn-5 { backface-visibility: hidden; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; border-color: #7c7c7c; background: linear-gradient(180deg, #e6e6e6 0%, rgba(0, 0, 0, 0.25) 49%, rgba(38, 38, 38, 0.6) 51%, rgba(0, 0, 0, 0.25) 100%); border-radius: 5px; } /* 6 */ .btn-6 { border-color: #7c7c7c; background: linear-gradient(top, rgba(38, 38, 38, 0.8), #e6e6e6 25%, #ffffff 38%, #c5c5c5 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8)); background: -webkit-linear-gradient(top, rgba(38, 38, 38, 0.5), #e6e6e6 25%, #ffffff 38%, rgba(0, 0, 0, 0.25) 63%, #e6e6e6 87%, rgba(38, 38, 38, 0.4)); } /* 7 */ .btn-7 { border-color: #7c7c7c; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(#e6e6e6)); } /* 8 */ .btn-8 { border-color: #7c7c7c; background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%), linear-gradient(180deg, hsl(0, 0%, 78%) 0%, hsl(0, 0%, 90%) 47%, hsl(0, 0%, 78%) 53%, hsl(0, 0%, 70%)100%); } /* 9 */ .btn-9 { backface-visibility: hidden; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; border-color: #D9A3A9; background: linear-gradient(180deg, #FFE6E9 0%, #DDA6AE 49%, #B76E79 51%, #DDA6AE 100%); border-radius: 5px; } /* 10 */ .btn-10 { border-color: #D9A3A9; background: linear-gradient(top, #DDA6AE, #FFE6E9 25%, #ffffff 38%, #FFE6E9 63%, #f7f7f7 87%, rgba(38, 38, 38, 0.8)); background: -webkit-linear-gradient(top, #DDA6AE, #FFE6E9 25%, #ffefef 38%, #D9A3A9 63%, #FFE6E9 87%, #DDA6AE); } /* 11 */ .btn-11 { border-color: #D9A3A9; background: -webkit-gradient(linear, left top, left bottom, from(#D9A3A9), to(#FFE6E9)); } /* 12 */ .btn-12 { border-color: #D9A3A9; background-image: -webkit-repeating-linear-gradient(left, rgba(255, 230, 233, 0) 0%, rgba(255, 230, 233, 0) 3%, rgba(255, 230, 233, .1) 3.75%), -webkit-repeating-linear-gradient(left, rgba(183, 110, 121, 0) 0%, rgba(183, 110, 121, 0) 2%, rgba(183, 110, 121, .2) 2.25%), -webkit-repeating-linear-gradient(left, rgba(255, 230, 233, 0) 0%, rgba(255, 230, 233, 0) .6%, rgba(255, 230, 233, .3) 1.1%), linear-gradient(180deg, #D9A3A9 0%, rgba(255, 230, 233, 1) 47%, #D9A3A9 53%, rgba(255, 230, 233, .7)100%); } /* 13 */ .btn-13 { backface-visibility: hidden; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; border-color: #111; color: #555; background: linear-gradient(180deg, #555 0%, #222 49%, #000 51%, #222 100%); border-radius: 5px; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, 0.3); } /* 14 */ .btn-14 { box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, 0.3); border-color: #111; color: #555; background: -webkit-linear-gradient(top, #000, #222 15%, #333 28%, #000 63%, #2f2f2f 87%, #000); } /* 15 */ .btn-15 { box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .8), 0px 1px 3px rgba(0, 0, 0, 0.3); border-color: #111; color: #555; text-shadow: -1px -1px 1px rgba(0, 0, 0, 1); background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); } /* 16 */ .btn-16 { box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 3px rgba(0, 0, 0, 0.3); border-color: #111; color: #555; background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%), linear-gradient(180deg, hsl(0, 0%, 0%) 0%, hsl(0, 0%, 10%) 47%, hsl(0, 0%, 0%) 53%, hsl(0, 0%, 10%)100%); }
Description Text
Extra Text
Description Text
Extra Text