├── .gitignore ├── README.md ├── dist ├── css │ └── style.css └── js │ └── bundle.js ├── gradient-buttons ├── gradient-buttons.css ├── gradient-buttons.min.css └── sass │ ├── _gradients.sass │ ├── _helper.sass │ ├── _utility.sass │ ├── _variables.sass │ └── main.sass ├── gulpfile.js ├── img ├── favicon.ico └── logo.png ├── index.html ├── js └── app.js ├── package.json └── sass └── main.sass /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # GradientButtons 2 | 💻 A Lightweight Gradient Button Css Library 3 | 4 | [Demo](https://ysoftaoglu.github.io/GradientButtons/) -------------------------------------------------------------------------------- /dist/css/style.css: -------------------------------------------------------------------------------- 1 | code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} 2 | ::-moz-selection{background-color:#f7fbff}::selection{background-color:#f7fbff}*{-webkit-box-sizing:border-box;box-sizing:border-box}body{font-size:14px;margin:0;color:#546E7A;padding:0;font-family:'Montserrat' !important}button,pre,code{font-family:'Montserrat' !important}.u-text-center{text-align:center !important}.u-block{display:block !important}.mb-15{margin-bottom:15px !important}.mt-15{margin-top:15px !important}.text{line-height:24px}.container{width:50%;margin:0 auto}@media (max-width: 850px){.container{width:100%}}pre[class*="language-"]{background-color:transparent !important;margin:0;padding:0}.link{color:#5893FE}.hero{padding:30px;background:-webkit-gradient(linear, left top, left bottom, from(#faf0ff), to(#fff));background:linear-gradient(#faf0ff, #fff)}.hero__logo{width:50px}.hero__logo-text{color:#B239FF;font-size:17px;margin-top:5px}.hero__desc{margin-top:15px}.info{padding:30px;border-top:1px solid #ece5ff}.info__title{font-size:20px;color:#5f6f77}.info__title span{color:#d4c2ff;font-size:30px;margin-right:3px}.info__code{background-color:#fbf3ff;padding:15px;letter-spacing:1px}.info__code .token.tag{line-height:30px}.info__highlight{background-color:#fffaec;padding:2px;color:#000}.footer{padding:30px;border-top:1px solid #ece5ff}.footer__copy{font-size:13px} 3 | -------------------------------------------------------------------------------- /dist/js/bundle.js: -------------------------------------------------------------------------------- 1 | "use strict";var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,a=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof n?new n(e.type,a.util.encode(e.content),e.alias):"Array"===a.util.type(e)?e.map(a.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(P instanceof o)){p.lastIndex=0;var w=p.exec(P),x=1;if(!w&&h&&v!=t.length-1){if(p.lastIndex=k,!(w=p.exec(e)))break;for(var S=w.index+(d?w[1].length:0),A=w.index+w[0].length,j=v,_=k,C=t.length;j=(_+=t[j].length)&&(++v,k=_);if(t[v]instanceof o||t[j-1].greedy)continue;x=j-v,P=e.slice(k,_),w.index-=k}if(w){d&&(f=w[1].length);var A=(S=w.index+f)+(w=w[0].slice(f)).length,E=P.slice(0,S),N=P.slice(A),F=[v,x];E&&(++v,k+=E.length,F.push(E));var O=new o(u,m?a.tokenize(w,m):w,y,w,h);if(F.push(O),N&&F.push(N),Array.prototype.splice.apply(t,F),1!=x&&a.matchGrammar(e,t,n,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,n){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return a.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var n=a.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=a.hooks.all[e];if(n&&n.length)for(var r,i=0;r=n[i++];)r(t)}}},n=a.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(n.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===a.util.type(e))return e.map(function(a){return n.stringify(a,t,e)}).join("");var i={type:e.type,content:n.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var s="Array"===a.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}a.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),n=t.language,r=t.code,i=t.immediateClose;_self.postMessage(a.highlight(r,a.languages[n],n)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(a.filename=r.src,!document.addEventListener||a.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(a.highlightAll):window.setTimeout(a.highlightAll,16):document.addEventListener("DOMContentLoaded",a.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\s\S])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\s\S]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript,function(){"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.forEach&&Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var a,n=t.getAttribute("data-src"),r=t,i=/\blang(?:uage)?-(?!\*)(\w+)\b/i;r&&!i.test(r.className);)r=r.parentNode;if(r&&(a=(t.className.match(i)||[,""])[1]),!a){var s=(n.match(/\.(\w+)$/)||[,""])[1];a=e[s]||s}var l=document.createElement("code");l.className="language-"+a,t.textContent="",l.textContent="Loading…",t.appendChild(l);var o=new XMLHttpRequest;o.open("GET",n,!0),o.onreadystatechange=function(){4==o.readyState&&(o.status<400&&o.responseText?(l.textContent=o.responseText,Prism.highlightElement(l)):o.status>=400?l.textContent="✖ Error "+o.status+" while fetching file: "+o.statusText:l.textContent="✖ Error: File does not exist or is empty")},o.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight))}(); -------------------------------------------------------------------------------- /gradient-buttons/gradient-buttons.css: -------------------------------------------------------------------------------- 1 | .g-btn.u-bold { 2 | font-weight: bold !important 3 | } 4 | .g-btn.u-block { 5 | display: block !important; 6 | width: 100% !important 7 | } 8 | .g-btn.u-large { 9 | font-size: 15px 10 | } 11 | .g-btn.u-x-large { 12 | font-size: 17px 13 | } 14 | .g-btn.u-small { 15 | font-size: 11px 16 | } 17 | .g-btn.radius-sm { 18 | border-radius: 5px 19 | } 20 | .g-btn.radius-md { 21 | border-radius: 15px 22 | } 23 | .g-btn.radius-lg { 24 | border-radius: 30px 25 | } 26 | .g-btn.disabled { 27 | opacity: .6; 28 | pointer-events: none; 29 | border: 0 !important 30 | } 31 | .g-btn { 32 | border: 0; 33 | color: #fff; 34 | cursor: pointer; 35 | display: inline-block; 36 | font-size: 13px; 37 | padding: .7rem 1.2rem; 38 | outline: 0 39 | } 40 | .g-btn__left-icon { 41 | margin-right: 7px 42 | } 43 | .g-btn__right-icon { 44 | margin-left: 7px 45 | } 46 | .g-btn.has-border { 47 | border: 1px solid 48 | } 49 | .g-btn--blue { 50 | background: -webkit-gradient(linear, left top, left bottom, from(#389FFD), to(#006cff)); 51 | background: linear-gradient(#389FFD, #006cff) 52 | } 53 | .g-btn--blue.has-border { 54 | border-color: #0066f1 55 | } 56 | .g-btn--blue:hover { 57 | background: #006cff 58 | } 59 | .g-btn--purple { 60 | background: -webkit-gradient(linear, left top, left bottom, from(#C644FC), to(#5856D6)); 61 | background: linear-gradient(#C644FC, #5856D6) 62 | } 63 | .g-btn--purple.has-border { 64 | border-color: #514fce 65 | } 66 | .g-btn--purple:hover { 67 | background: #824FE4 68 | } 69 | .g-btn--pink { 70 | background: -webkit-gradient(linear, left top, left bottom, from(#e5a6ff), to(#c644fc)); 71 | background: linear-gradient(#e5a6ff, #c644fc) 72 | } 73 | .g-btn--pink.has-border { 74 | border-color: #bc1aff 75 | } 76 | .g-btn--pink:hover { 77 | background: #D471FD 78 | } 79 | .g-btn--red { 80 | background: -webkit-gradient(linear, left top, left bottom, from(#FF7AA2), to(#FF2D55)); 81 | background: linear-gradient(#FF7AA2, #FF2D55) 82 | } 83 | .g-btn--red.has-border { 84 | border-color: #ff1c47 85 | } 86 | .g-btn--red:hover { 87 | background: #FF446C 88 | } 89 | .g-btn--green { 90 | background: -webkit-gradient(linear, left top, left bottom, from(#9FD4A2), to(#66BB6A)); 91 | background: linear-gradient(#9FD4A2, #66BB6A) 92 | } 93 | .g-btn--green.has-border { 94 | border-color: #59b55e 95 | } 96 | .g-btn--green:hover { 97 | background: #66BB6A 98 | } 99 | .g-btn--gray { 100 | background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#a7a7a7)); 101 | background: linear-gradient(#cecece, #a7a7a7) 102 | } 103 | .g-btn--gray.has-border { 104 | border-color: #9c9c9c 105 | } 106 | .g-btn--gray:hover { 107 | background: #a7a7a7 108 | } 109 | .g-btn--orange { 110 | background: -webkit-gradient(linear, left top, left bottom, from(#FFB284), to(#FF5E3A)); 111 | background: linear-gradient(#FFB284, #FF5E3A) 112 | } 113 | .g-btn--orange.has-border { 114 | border-color: #ff6340 115 | } 116 | .g-btn--orange:hover { 117 | background: #FF5F3B 118 | } 119 | .g-btn--yellow { 120 | background: -webkit-gradient(linear, left top, left bottom, from(#FFBE5F), to(#FF9800)); 121 | background: linear-gradient(#FFBE5F, #FF9800) 122 | } 123 | .g-btn--yellow.has-border { 124 | border-color: #ec8d00 125 | } 126 | .g-btn--yellow:hover { 127 | background: #FF9800 128 | } 129 | .g-btn--aqua { 130 | background: -webkit-gradient(linear, left top, left bottom, from(#47CFE0), to(#00BCD4)); 131 | background: linear-gradient(#47CFE0, #00BCD4) 132 | } 133 | .g-btn--aqua.has-border { 134 | border-color: #00a6bb 135 | } 136 | .g-btn--aqua:hover { 137 | background: #00BCD4 138 | } 139 | .g-btn--dark-green { 140 | background: -webkit-gradient(linear, left top, left bottom, from(#62CF89), to(#00b140)); 141 | background: linear-gradient(#62CF89, #00b140) 142 | } 143 | .g-btn--dark-green.has-border { 144 | border-color: #00a53b 145 | } 146 | .g-btn--dark-green:hover { 147 | background: #3FC46F 148 | } 149 | .g-btn--dark-aqua { 150 | background: -webkit-gradient(linear, left top, left bottom, from(#66ADD1), to(#067ab4)); 151 | background: linear-gradient(#66ADD1, #067ab4) 152 | } 153 | .g-btn--dark-aqua.has-border { 154 | border-color: #006598 155 | } 156 | .g-btn--dark-aqua:hover { 157 | background: #469CC7 158 | } 159 | .g-btn--brown { 160 | background: -webkit-gradient(linear, left top, left bottom, from(#AB958C), to(#795548)); 161 | background: linear-gradient(#AB958C, #795548) 162 | } 163 | .g-btn--brown.has-border { 164 | border-color: #6b4b3f 165 | } 166 | .g-btn--brown:hover { 167 | background: #9E857B 168 | } 169 | .g-btn--light-purple { 170 | background: -webkit-gradient(linear, left top, left bottom, from(#E15FA7), to(#cf0072)); 171 | background: linear-gradient(#E15FA7, #cf0072) 172 | } 173 | .g-btn--light-purple.has-border { 174 | border-color: #b50064 175 | } 176 | .g-btn--light-purple:hover { 177 | background: #DC4598 178 | } 179 | .g-btn--black { 180 | background: -webkit-gradient(linear, left top, left bottom, from(#9DAFB8), to(#607D8B)); 181 | background: linear-gradient(#9DAFB8, #607D8B) 182 | } 183 | .g-btn--black.has-border { 184 | border-color: #5b7582 185 | } 186 | .g-btn--black:hover { 187 | background: #849BA6 188 | } 189 | .g-btn--dark-blue { 190 | background: -webkit-gradient(linear, left top, left bottom, from(#657CFE), to(#0e2bcc)); 191 | background: linear-gradient(#657CFE, #0e2bcc) 192 | } 193 | .g-btn--dark-blue.has-border { 194 | border-color: #0b26bb 195 | } 196 | .g-btn--dark-blue:hover { 197 | background: #4D66F0 198 | } 199 | .g-btn--light-yellow { 200 | background: -webkit-gradient(linear, left top, left bottom, from(#FFD34E), to(#FFC107)); 201 | background: linear-gradient(#FFD34E, #FFC107) 202 | } 203 | .g-btn--light-yellow.has-border { 204 | border-color: #e4ab00 205 | } 206 | .g-btn--light-yellow:hover { 207 | background: #FFC107 208 | } 209 | .g-btn--light-blue { 210 | background: -webkit-gradient(linear, left top, left bottom, from(#73BBFE), to(#4E99FF)); 211 | background: linear-gradient(#73BBFE, #4E99FF) 212 | } 213 | .g-btn--light-blue.has-border { 214 | border-color: #177aff 215 | } 216 | .g-btn--light-blue:hover { 217 | background: #4E99FF 218 | } 219 | .g-btn--white { 220 | background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#F0F0F0)); 221 | background: linear-gradient(#FDFDFD, #F0F0F0); 222 | color: #000 223 | } 224 | .g-btn--white.has-border { 225 | border-color: #d6d6d6 226 | } 227 | .g-btn--white:hover { 228 | background: #F1F1F1 229 | } 230 | .g-btn--faded-purple { 231 | background: -webkit-gradient(linear, left top, left bottom, from(#A3A0C9), to(#6762a6)); 232 | background: linear-gradient(#A3A0C9, #6762a6) 233 | } 234 | .g-btn--faded-purple.has-border { 235 | border-color: #5a5692 236 | } 237 | .g-btn--faded-purple:hover { 238 | background: #918DBE 239 | } 240 | .g-btn--dark-red { 241 | background: -webkit-gradient(linear, left top, left bottom, from(#FD8788), to(#DF2029)); 242 | background: linear-gradient(#FD8788, #DF2029) 243 | } 244 | .g-btn--dark-red.has-border { 245 | border-color: #e00b15 246 | } 247 | .g-btn--dark-red:hover { 248 | background: #EF585C 249 | } 250 | .g-btn--yellow-to-purple { 251 | background: linear-gradient(135deg, #d6ea08, #ef00ff) 252 | } 253 | .g-btn--yellow-to-purple:hover { 254 | background: #E654A6 255 | } 256 | .g-btn--blue-to-pink { 257 | background: linear-gradient(135deg, #1bb4ec, #e85e8e) 258 | } 259 | .g-btn--blue-to-pink:hover { 260 | background: #6A93C8 261 | } 262 | .g-btn--aqua-to-blue { 263 | background: linear-gradient(135deg, #22d9f1, #006cff) 264 | } 265 | .g-btn--aqua-to-blue:hover { 266 | background: #12A7F7 267 | } 268 | .g-btn--yellow-to-orange { 269 | background: linear-gradient(135deg, #FFBD20, #FF5E3A) 270 | } 271 | .g-btn--yellow-to-orange:hover { 272 | background: #FF8C2D 273 | } 274 | .g-btn--green-to-purple { 275 | background: linear-gradient(135deg, #3bd1d3, #7b81ec) 276 | } 277 | .g-btn--green-to-purple:hover { 278 | background: #5DA6E0 279 | } 280 | .g-btn--pink-to-purple { 281 | background: linear-gradient(135deg, #a768d6, #d656d0) 282 | } 283 | .g-btn--pink-to-purple:hover { 284 | background: #CD59D1 285 | } 286 | .g-btn--pink-to-orange { 287 | background: linear-gradient(135deg, #FF24C9, #FF5E3A) 288 | } 289 | .g-btn--pink-to-orange:hover { 290 | background: #FF379B 291 | } 292 | .g-btn--purple-to-aqua { 293 | background: linear-gradient(135deg, #b721ff, #21d4fd) 294 | } 295 | .g-btn--purple-to-aqua:hover { 296 | background: #7A6AFE 297 | } 298 | .g-btn--aqua-to-green { 299 | background: linear-gradient(135deg, #4fd8f5, #62ef7e) 300 | } 301 | .g-btn--aqua-to-green:hover { 302 | background: #5AE5B0 303 | } 304 | .g-btn--purple-to-blue { 305 | background: linear-gradient(135deg, #b721ff, #6121fd) 306 | } 307 | .g-btn--purple-to-blue:hover { 308 | background: #8B21FE 309 | } 310 | .g-btn--aqua-to-white { 311 | background: linear-gradient(135deg, #2f7dff, #a1ddf9) 312 | } 313 | .g-btn--aqua-to-white:hover { 314 | background: #62A8FC 315 | } 316 | .g-btn--yellow-to-green { 317 | background: linear-gradient(135deg, #d6ea08, #00ff4e) 318 | } 319 | .g-btn--yellow-to-green:hover { 320 | background: #76F327 321 | } -------------------------------------------------------------------------------- /gradient-buttons/gradient-buttons.min.css: -------------------------------------------------------------------------------- 1 | .g-btn.u-bold{font-weight:bold !important}.g-btn.u-block{display:block !important;width:100% !important}.g-btn.u-large{font-size:15px}.g-btn.u-x-large{font-size:17px}.g-btn.u-small{font-size:11px}.g-btn.radius-sm{border-radius:5px}.g-btn.radius-md{border-radius:15px}.g-btn.radius-lg{border-radius:30px}.g-btn.disabled{opacity:.6;pointer-events:none;border:0 !important}.g-btn{border:0;color:#fff;cursor:pointer;display:inline-block;font-size:13px;padding:.7rem 1.2rem;outline:0}.g-btn__left-icon{margin-right:7px}.g-btn__right-icon{margin-left:7px}.g-btn.has-border{border:1px solid}.g-btn--blue{background:-webkit-gradient(linear, left top, left bottom, from(#389FFD), to(#006cff));background:linear-gradient(#389FFD, #006cff)}.g-btn--blue.has-border{border-color:#0066f1}.g-btn--blue:hover{background:#006cff}.g-btn--purple{background:-webkit-gradient(linear, left top, left bottom, from(#C644FC), to(#5856D6));background:linear-gradient(#C644FC, #5856D6)}.g-btn--purple.has-border{border-color:#514fce}.g-btn--purple:hover{background:#824FE4}.g-btn--pink{background:-webkit-gradient(linear, left top, left bottom, from(#e5a6ff), to(#c644fc));background:linear-gradient(#e5a6ff, #c644fc)}.g-btn--pink.has-border{border-color:#bc1aff}.g-btn--pink:hover{background:#D471FD}.g-btn--red{background:-webkit-gradient(linear, left top, left bottom, from(#FF7AA2), to(#FF2D55));background:linear-gradient(#FF7AA2, #FF2D55)}.g-btn--red.has-border{border-color:#ff1c47}.g-btn--red:hover{background:#FF446C}.g-btn--green{background:-webkit-gradient(linear, left top, left bottom, from(#9FD4A2), to(#66BB6A));background:linear-gradient(#9FD4A2, #66BB6A)}.g-btn--green.has-border{border-color:#59b55e}.g-btn--green:hover{background:#66BB6A}.g-btn--gray{background:-webkit-gradient(linear, left top, left bottom, from(#cecece), to(#a7a7a7));background:linear-gradient(#cecece, #a7a7a7)}.g-btn--gray.has-border{border-color:#9c9c9c}.g-btn--gray:hover{background:#a7a7a7}.g-btn--orange{background:-webkit-gradient(linear, left top, left bottom, from(#FFB284), to(#FF5E3A));background:linear-gradient(#FFB284, #FF5E3A)}.g-btn--orange.has-border{border-color:#ff6340}.g-btn--orange:hover{background:#FF5F3B}.g-btn--yellow{background:-webkit-gradient(linear, left top, left bottom, from(#FFBE5F), to(#FF9800));background:linear-gradient(#FFBE5F, #FF9800)}.g-btn--yellow.has-border{border-color:#ec8d00}.g-btn--yellow:hover{background:#FF9800}.g-btn--aqua{background:-webkit-gradient(linear, left top, left bottom, from(#47CFE0), to(#00BCD4));background:linear-gradient(#47CFE0, #00BCD4)}.g-btn--aqua.has-border{border-color:#00a6bb}.g-btn--aqua:hover{background:#00BCD4}.g-btn--dark-green{background:-webkit-gradient(linear, left top, left bottom, from(#62CF89), to(#00b140));background:linear-gradient(#62CF89, #00b140)}.g-btn--dark-green.has-border{border-color:#00a53b}.g-btn--dark-green:hover{background:#3FC46F}.g-btn--dark-aqua{background:-webkit-gradient(linear, left top, left bottom, from(#66ADD1), to(#067ab4));background:linear-gradient(#66ADD1, #067ab4)}.g-btn--dark-aqua.has-border{border-color:#006598}.g-btn--dark-aqua:hover{background:#469CC7}.g-btn--brown{background:-webkit-gradient(linear, left top, left bottom, from(#AB958C), to(#795548));background:linear-gradient(#AB958C, #795548)}.g-btn--brown.has-border{border-color:#6b4b3f}.g-btn--brown:hover{background:#9E857B}.g-btn--light-purple{background:-webkit-gradient(linear, left top, left bottom, from(#E15FA7), to(#cf0072));background:linear-gradient(#E15FA7, #cf0072)}.g-btn--light-purple.has-border{border-color:#b50064}.g-btn--light-purple:hover{background:#DC4598}.g-btn--black{background:-webkit-gradient(linear, left top, left bottom, from(#9DAFB8), to(#607D8B));background:linear-gradient(#9DAFB8, #607D8B)}.g-btn--black.has-border{border-color:#5b7582}.g-btn--black:hover{background:#849BA6}.g-btn--dark-blue{background:-webkit-gradient(linear, left top, left bottom, from(#657CFE), to(#0e2bcc));background:linear-gradient(#657CFE, #0e2bcc)}.g-btn--dark-blue.has-border{border-color:#0b26bb}.g-btn--dark-blue:hover{background:#4D66F0}.g-btn--light-yellow{background:-webkit-gradient(linear, left top, left bottom, from(#FFD34E), to(#FFC107));background:linear-gradient(#FFD34E, #FFC107)}.g-btn--light-yellow.has-border{border-color:#e4ab00}.g-btn--light-yellow:hover{background:#FFC107}.g-btn--light-blue{background:-webkit-gradient(linear, left top, left bottom, from(#73BBFE), to(#4E99FF));background:linear-gradient(#73BBFE, #4E99FF)}.g-btn--light-blue.has-border{border-color:#177aff}.g-btn--light-blue:hover{background:#4E99FF}.g-btn--white{background:-webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#F0F0F0));background:linear-gradient(#FDFDFD, #F0F0F0);color:#000}.g-btn--white.has-border{border-color:#d6d6d6}.g-btn--white:hover{background:#F1F1F1}.g-btn--faded-purple{background:-webkit-gradient(linear, left top, left bottom, from(#A3A0C9), to(#6762a6));background:linear-gradient(#A3A0C9, #6762a6)}.g-btn--faded-purple.has-border{border-color:#5a5692}.g-btn--faded-purple:hover{background:#918DBE}.g-btn--dark-red{background:-webkit-gradient(linear, left top, left bottom, from(#FD8788), to(#DF2029));background:linear-gradient(#FD8788, #DF2029)}.g-btn--dark-red.has-border{border-color:#e00b15}.g-btn--dark-red:hover{background:#EF585C}.g-btn--yellow-to-purple{background:linear-gradient(135deg, #d6ea08, #ef00ff)}.g-btn--yellow-to-purple:hover{background:#E654A6}.g-btn--blue-to-pink{background:linear-gradient(135deg, #1bb4ec, #e85e8e)}.g-btn--blue-to-pink:hover{background:#6A93C8}.g-btn--aqua-to-blue{background:linear-gradient(135deg, #22d9f1, #006cff)}.g-btn--aqua-to-blue:hover{background:#12A7F7}.g-btn--yellow-to-orange{background:linear-gradient(135deg, #FFBD20, #FF5E3A)}.g-btn--yellow-to-orange:hover{background:#FF8C2D}.g-btn--green-to-purple{background:linear-gradient(135deg, #3bd1d3, #7b81ec)}.g-btn--green-to-purple:hover{background:#5DA6E0}.g-btn--pink-to-purple{background:linear-gradient(135deg, #a768d6, #d656d0)}.g-btn--pink-to-purple:hover{background:#CD59D1}.g-btn--pink-to-orange{background:linear-gradient(135deg, #FF24C9, #FF5E3A)}.g-btn--pink-to-orange:hover{background:#FF379B}.g-btn--purple-to-aqua{background:linear-gradient(135deg, #b721ff, #21d4fd)}.g-btn--purple-to-aqua:hover{background:#7A6AFE}.g-btn--aqua-to-green{background:linear-gradient(135deg, #4fd8f5, #62ef7e)}.g-btn--aqua-to-green:hover{background:#5AE5B0}.g-btn--purple-to-blue{background:linear-gradient(135deg, #b721ff, #6121fd)}.g-btn--purple-to-blue:hover{background:#8B21FE}.g-btn--aqua-to-white{background:linear-gradient(135deg, #2f7dff, #a1ddf9)}.g-btn--aqua-to-white:hover{background:#62A8FC}.g-btn--yellow-to-green{background:linear-gradient(135deg, #d6ea08, #00ff4e)}.g-btn--yellow-to-green:hover{background:#76F327} 2 | -------------------------------------------------------------------------------- /gradient-buttons/sass/_gradients.sass: -------------------------------------------------------------------------------- 1 | // Simple Button 2 | $g-blue: linear-gradient(#389FFD, #006cff) 3 | $g-red: linear-gradient(#FF7AA2, #FF2D55) 4 | $g-dark-red: linear-gradient(#FD8788, #DF2029) 5 | $g-purple: linear-gradient(#C644FC, #5856D6) 6 | $g-pink: linear-gradient(#e5a6ff, #c644fc) 7 | $g-white: linear-gradient(#FDFDFD,#F0F0F0) 8 | $g-green: linear-gradient(#9FD4A2, #66BB6A) 9 | $g-gray: linear-gradient(#cecece, #a7a7a7) 10 | $g-yellow: linear-gradient(#FFBE5F, #FF9800) 11 | $g-light-yellow: linear-gradient(#FFD34E, #FFC107) 12 | $g-aqua: linear-gradient(#47CFE0, #00BCD4) 13 | $g-dark-green: linear-gradient(#62CF89, #00b140) 14 | $g-dark-aqua: linear-gradient(#66ADD1, #067ab4) 15 | $g-brown: linear-gradient(#AB958C, #795548) 16 | $g-orange: linear-gradient(#FFB284, #FF5E3A) 17 | $g-light-purple: linear-gradient(#E15FA7, #cf0072) 18 | $g-faded-purple: linear-gradient(#A3A0C9, #6762a6) 19 | $g-black: linear-gradient(#9DAFB8, #607D8B) 20 | $g-dark-blue: linear-gradient(#657CFE, #0e2bcc) 21 | $g-light-blue: linear-gradient(#73BBFE, #4E99FF) 22 | 23 | // Colorful Gradients 24 | $g-yellow-to-purple: linear-gradient(135deg, #d6ea08, #ef00ff) 25 | $g-blue-to-pink: linear-gradient(135deg, #1bb4ec, #e85e8e) 26 | $g-aqua-to-blue: linear-gradient(135deg, #22d9f1, #006cff) 27 | $g-yellow-to-orange: linear-gradient(135deg, #FFBD20, #FF5E3A) 28 | $g-green-to-purple: linear-gradient(135deg, #3bd1d3, #7b81ec) 29 | $g-pink-to-purple: linear-gradient(135deg, #a768d6, #d656d0) 30 | $g-pink-to-orange: linear-gradient(135deg, #FF24C9, #FF5E3A) 31 | $g-purple-to-aqua: linear-gradient(135deg, #b721ff, #21d4fd) 32 | $g-aqua-to-green: linear-gradient(135deg, #4fd8f5, #62ef7e) 33 | $g-purple-to-blue: linear-gradient(135deg, #b721ff, #6121fd) 34 | $g-aqua-to-white: linear-gradient(135deg, #2f7dff, #a1ddf9) 35 | $g-yellow-to-green: linear-gradient(135deg, #d6ea08, #00ff4e) -------------------------------------------------------------------------------- /gradient-buttons/sass/_helper.sass: -------------------------------------------------------------------------------- 1 | .g-btn 2 | &.radius-sm 3 | border-radius: $sm-radius 4 | &.radius-md 5 | border-radius: $md-radius 6 | &.radius-lg 7 | border-radius: $lg-radius 8 | &.disabled 9 | opacity: .6 10 | pointer-events: none 11 | border: 0 !important -------------------------------------------------------------------------------- /gradient-buttons/sass/_utility.sass: -------------------------------------------------------------------------------- 1 | .g-btn 2 | &.u-bold 3 | font-weight: bold !important 4 | &.u-block 5 | display: block !important 6 | width: 100% !important 7 | &.u-large 8 | font-size: $lg-font-size 9 | &.u-x-large 10 | font-size: $x-lg-font-size 11 | &.u-small 12 | font-size: $sm-font-size -------------------------------------------------------------------------------- /gradient-buttons/sass/_variables.sass: -------------------------------------------------------------------------------- 1 | // Colors 2 | $white: #fff 3 | $black: #000 4 | 5 | // Font Size 6 | $sm-font-size: 11px 7 | $md-font-size: 13px 8 | $lg-font-size: 15px 9 | $x-lg-font-size: 17px 10 | 11 | // Padding 12 | $vertical-padding: 0.7rem 13 | $horizontal-padding: 1.2rem 14 | 15 | // Border Radius 16 | $sm-radius: 5px 17 | $md-radius: 15px 18 | $lg-radius: 30px 19 | -------------------------------------------------------------------------------- /gradient-buttons/sass/main.sass: -------------------------------------------------------------------------------- 1 | // Partials 2 | @import '_gradients' 3 | @import '_variables' 4 | @import '_utility' 5 | @import '_helper' 6 | 7 | .g-btn 8 | border: 0 9 | color: $white 10 | cursor: pointer 11 | display: inline-block 12 | font-size: $md-font-size 13 | padding: $vertical-padding $horizontal-padding 14 | outline: 0 15 | 16 | // Icon Spacing 17 | &__left-icon 18 | margin-right: 7px 19 | &__right-icon 20 | margin-left: 7px 21 | 22 | // Button Styling 23 | &.has-border 24 | border: 1px solid 25 | // Simple Gradient Buttons 26 | &--blue 27 | background: $g-blue 28 | &.has-border 29 | border-color: #0066f1 30 | &:hover 31 | background: #006cff 32 | &--purple 33 | background: $g-purple 34 | &.has-border 35 | border-color: #514fce 36 | &:hover 37 | background: #824FE4 38 | &--pink 39 | background: $g-pink 40 | &.has-border 41 | border-color: #bc1aff 42 | &:hover 43 | background: #D471FD 44 | &--red 45 | background: $g-red 46 | &.has-border 47 | border-color: #ff1c47 48 | &:hover 49 | background: #FF446C 50 | &--green 51 | background: $g-green 52 | &.has-border 53 | border-color: #59b55e 54 | &:hover 55 | background: #66BB6A 56 | &--gray 57 | background: $g-gray 58 | &.has-border 59 | border-color: #9c9c9c 60 | &:hover 61 | background: #a7a7a7 62 | &--orange 63 | background: $g-orange 64 | &.has-border 65 | border-color: #ff6340 66 | &:hover 67 | background: #FF5F3B 68 | &--yellow 69 | background: $g-yellow 70 | &.has-border 71 | border-color: #ec8d00 72 | &:hover 73 | background: #FF9800 74 | &--aqua 75 | background: $g-aqua 76 | &.has-border 77 | border-color: #00a6bb 78 | &:hover 79 | background: #00BCD4 80 | &--dark-green 81 | background: $g-dark-green 82 | &.has-border 83 | border-color: #00a53b 84 | &:hover 85 | background: #3FC46F 86 | &--dark-aqua 87 | background: $g-dark-aqua 88 | &.has-border 89 | border-color: #006598 90 | &:hover 91 | background: #469CC7 92 | &--brown 93 | background: $g-brown 94 | &.has-border 95 | border-color: #6b4b3f 96 | &:hover 97 | background: #9E857B 98 | &--light-purple 99 | background: $g-light-purple 100 | &.has-border 101 | border-color: #b50064 102 | &:hover 103 | background: #DC4598 104 | &--black 105 | background: $g-black 106 | &.has-border 107 | border-color: #5b7582 108 | &:hover 109 | background: #849BA6 110 | &--dark-blue 111 | background: $g-dark-blue 112 | &.has-border 113 | border-color: #0b26bb 114 | &:hover 115 | background: #4D66F0 116 | &--light-yellow 117 | background: $g-light-yellow 118 | &.has-border 119 | border-color: #e4ab00 120 | &:hover 121 | background: #FFC107 122 | &--light-blue 123 | background: $g-light-blue 124 | &.has-border 125 | border-color: #177aff 126 | &:hover 127 | background: #4E99FF 128 | &--white 129 | background: $g-white 130 | color: #000 131 | &.has-border 132 | border-color: #d6d6d6 133 | &:hover 134 | background: #F1F1F1 135 | &--faded-purple 136 | background: $g-faded-purple 137 | &.has-border 138 | border-color: #5a5692 139 | &:hover 140 | background: #918DBE 141 | &--dark-red 142 | background: $g-dark-red 143 | &.has-border 144 | border-color: #e00b15 145 | &:hover 146 | background: #EF585C 147 | // Colorful Gradient Buttons 148 | &--yellow-to-purple 149 | background: $g-yellow-to-purple 150 | &:hover 151 | background: #E654A6 152 | &--blue-to-pink 153 | background: $g-blue-to-pink 154 | &:hover 155 | background: #6A93C8 156 | &--aqua-to-blue 157 | background: $g-aqua-to-blue 158 | &:hover 159 | background: #12A7F7 160 | &--yellow-to-orange 161 | background: $g-yellow-to-orange 162 | &:hover 163 | background: #FF8C2D 164 | &--green-to-purple 165 | background: $g-green-to-purple 166 | &:hover 167 | background: #5DA6E0 168 | &--pink-to-purple 169 | background: $g-pink-to-purple 170 | &:hover 171 | background: #CD59D1 172 | &--pink-to-orange 173 | background: $g-pink-to-orange 174 | &:hover 175 | background: #FF379B 176 | &--purple-to-aqua 177 | background: $g-purple-to-aqua 178 | &:hover 179 | background: #7A6AFE 180 | &--aqua-to-green 181 | background: $g-aqua-to-green 182 | &:hover 183 | background: #5AE5B0 184 | &--purple-to-blue 185 | background: $g-purple-to-blue 186 | &:hover 187 | background: #8B21FE 188 | &--aqua-to-white 189 | background: $g-aqua-to-white 190 | &:hover 191 | background: #62A8FC 192 | &--yellow-to-green 193 | background: $g-yellow-to-green 194 | &:hover 195 | background: #76F327 196 | 197 | 198 | 199 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require("gulp"), 2 | sass = require("gulp-sass"), 3 | concat = require("gulp-concat"), 4 | autoPrefixer = require("gulp-autoprefixer"), 5 | uglify = require("gulp-uglify"), 6 | babel = require("gulp-babel"), 7 | browserSync = require('browser-sync'), 8 | reload = browserSync.reload, 9 | plumber = require("gulp-plumber"); 10 | 11 | 12 | gulp.task("js", function() { 13 | 14 | gulp.src('./js/**/*.js') 15 | .pipe(plumber()) 16 | .pipe(babel({ presets: ['es2015'] })) 17 | .pipe(uglify()) 18 | .pipe(concat('bundle.js')) 19 | .pipe(gulp.dest('./dist/js/')) 20 | .pipe(reload({stream:true})); 21 | }); 22 | 23 | gulp.task("sass", function() { 24 | 25 | gulp.src('./sass/**/*.sass') 26 | .pipe(plumber()) 27 | .pipe(sass({outputStyle: 'compressed'})) 28 | .pipe(concat('min.css')) 29 | .pipe(autoPrefixer()) 30 | .pipe(gulp.dest('./dist/css/')) 31 | .pipe(reload({stream:true})); 32 | }); 33 | 34 | gulp.task("sass:forButton", function() { 35 | gulp.src('./gradient-buttons/**/*.sass') 36 | .pipe(plumber()) 37 | .pipe(sass({outputStyle: 'compressed'})) 38 | .pipe(concat('gradient-buttons.min.css')) 39 | .pipe(autoPrefixer()) 40 | .pipe(gulp.dest('./gradient-buttons/')) 41 | .pipe(reload({stream:true})); 42 | }); 43 | 44 | gulp.task("html", function() { 45 | gulp.src("./*.html") 46 | .pipe(reload({stream:true})); 47 | }); 48 | 49 | gulp.task('browser-sync', function() { 50 | browserSync({ 51 | server: { 52 | baseDir: "./" 53 | } 54 | }); 55 | }); 56 | 57 | gulp.task("watch", function() { 58 | gulp.watch("./*.html", ['html']); 59 | gulp.watch("./sass/**/*.sass", ['sass']); 60 | }); 61 | 62 | gulp.task('default', ['sass', 'html', 'browser-sync', 'watch']); 63 | -------------------------------------------------------------------------------- /img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysoftaoglu/GradientButtons/d0cf7b0158904e82e91f01019d68cedcd1a6f190/img/favicon.ico -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ysoftaoglu/GradientButtons/d0cf7b0158904e82e91f01019d68cedcd1a6f190/img/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | A Lightweight Gradient Button Css Library | GradientButtons 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | Gradient Buttons 21 |

22 | This is a lightweight (💪 6.5 kb) css gradient button library for web development. It has many color options and helper classes 23 | that can change the view (border, size, display icon etc). It is very simple to use. Just add a stylesheet to your 24 | html file and start using the buttons 😎. 25 |

26 |
27 | Follow @ysoftaoglu 29 |
30 |
31 |
32 | 33 |
34 |
35 |
36 | #1 Basic Usage 37 |
38 |

39 | Download gradient-buttons here. 40 |

41 |

42 | You will need to include the gradient-buttons.min.css file in your page. That's it 🤓. 43 |

44 |
45 | 
<link rel="stylesheet" href="gradient-buttons.min.css"/>
 46 | <!-- Or Cdn -->
 47 | <link rel="stylesheet" href="https://raw.githubusercontent.com/ysoftaoglu/GradientButtons/master/gradient-buttons/gradient-buttons.min.css"/>
 48 |
49 |
50 |
51 |
52 | 53 |
54 |
55 |
56 | #2 Create Gradient Button 57 |
58 |

59 | You must first add the g-btn class to the html element to create the button, then add the class of the button you selected. Like this .g-btn .g-btn--blue 60 |

61 |
62 | 
<button class="g-btn g-btn--blue">Blue Button</button>
 63 |
64 |
65 |

Output:

66 | 67 |
68 |
69 | 70 |
71 |
72 |
73 | #3 Size Of Button 74 |
75 |

76 | You can use three helper classes to change the size of the buttons. 77 |

    78 |
  • u-small
    • 79 |
  • u-large
    • 80 |
  • u-x-large
    • 81 |
82 |

83 |
84 | 
<button class="g-btn g-btn--orange u-x-large">X Large</button>
 85 | <button class="g-btn g-btn--orange u-large">Large</button>
 86 | <button class="g-btn g-btn--orange">Default</button>
 87 | <button class="g-btn g-btn--orange u-small">Small</button>
 88 |
89 |
90 |

Output:

91 | 92 | 93 | 94 | 95 |
96 |
97 | 98 |
99 |
100 |
101 | #4 Add Border Radius 102 |
103 |

104 | You can use three helper classes to add border radius of the buttons. 105 |

    106 |
  • radius-sm
    • 107 |
  • radius-md
    • 108 |
  • radius-lg
    • 109 |
110 |

111 |
112 | 
<button class="g-btn g-btn--dark-green">Default</button>
113 | <button class="g-btn g-btn--dark-green radius-sm">Radius Sm</button>
114 | <button class="g-btn g-btn--dark-green radius-md">Radius Md</button>
115 | <button class="g-btn g-btn--dark-green radius-lg">Radius Lg</button>
116 |
117 |
118 |

Output:

119 | 120 | 121 | 122 | 123 |
124 |
125 | 126 |
127 |
128 |
129 | #5 Add Border 130 |
131 |

132 | You can add .has-border class to add border of the buttons. Now you have cool buttons 😁. 133 |

134 |
135 | 
<button class="g-btn g-btn--white has-border">White</button>
136 | <button class="g-btn g-btn--light-blue has-border">Light Blue</button>
137 | <button class="g-btn g-btn--pink has-border">Pink</button>
138 |
139 |
140 |

Output:

141 | 142 | 143 | 144 |
145 |
146 | 147 |
148 |
149 |
150 | #6 Fluid Buttons 151 |
152 |

153 | You can add .u-block class to create a button with full width. 154 |

155 |
156 | 
<button class="g-btn g-btn--blue u-block">Blue</button>
157 | <button class="g-btn g-btn--red u-block">Red</button>
158 | <button class="g-btn g-btn--aqua u-block">Aqua</button>
159 |
160 |
161 |

Output:

162 |
163 |
164 | 165 |
166 |
167 | 168 |
169 |
170 |
171 | #7 Disabled Buttons 172 |
173 |

174 | You can add .disabled class to add give the button disabled view. 175 |

176 |
177 | 
<button class="g-btn g-btn--light-purple disabled">Light Purple</button>
178 | <button class="g-btn g-btn--dark-blue disabled">Dark Blue</button>
179 | <button class="g-btn g-btn--purple disabled">Purple</button>
180 |
181 |
182 |

Output:

183 | 184 | 185 | 186 |
187 |
188 | 189 |
190 |
191 |
192 | #8 Mixing The Classes 193 |
194 |

195 | You can create better-looking buttons by adding different classes. 196 |

197 |
198 | 
<button class="g-btn g-btn--light-blue radius-lg has-border">Light Blue</button>
199 | <button class="g-btn g-btn--yellow radius-md">Yellow</button>
200 | <button class="g-btn g-btn--dark-red radius-sm has-border">Dark Red</button>
201 | <button class="g-btn g-btn--purple radius-sm u-small">Purple</button>
202 | <button class="g-btn g-btn--white radius-sm has-border u-big u-block">White</button>
203 | <button class="g-btn g-btn--dark-green radius-sm has-border u-block">Dark Green</button>
204 | <button class="g-btn g-btn--light-blue radius-sm u-block">Light Blue</button>
205 | <button class="g-btn g-btn--faded-purple u-small u-block">Faded Purple</button>
206 |
207 |
208 |

Output:

209 | 210 | 211 | 212 | 213 |
214 |
215 |
216 | 217 |
218 |
219 | 220 |
221 |
222 |
223 | #9 Using With Fontawesome 224 |
225 |

226 | You can use the buttons with FontAwesome. Use .g-btn__left-icon to add icon to the left of the button, use .g-btn__right-icon to add it to the right. 227 |

228 |
229 | 
<button class="g-btn g-btn--blue"><i class="fa fa-user g-btn__left-icon"></i>Sign Up</button>
230 | <button class="g-btn g-btn--dark-green">Sign In<i class="fa fa-check g-btn__right-icon"></i></button>
231 | <button class="g-btn g-btn--dark-red">Log Out<i class="fa fa-times g-btn__right-icon"></i></button>
232 |
233 |
234 |

Output:

235 | 236 | 237 | 238 |
239 |
240 | 241 |
242 |
243 |
244 | #10 List Of Simple Gradient Buttons 245 |
246 |

247 | In the Buttons you can see the classes they belong to. 248 |

249 | .g-btn--light-blue

250 | .g-btn--blue

251 | .g-btn--purple

252 | .g-btn--dark-red

253 | .g-btn--red

254 | .g-btn--green

255 | .g-btn--pink

256 | .g-btn--gray

257 | .g-btn--white

258 | .g-btn--orange

259 | .g-btn--yellow

260 | .g-btn--light-yellow

261 | .g-btn--aqua

262 | .g-btn--dark-green

263 | .g-btn--dark-aqua

264 | .g-btn--brown

265 | .g-btn--light-purple

266 | .g-btn--black

267 | .g-btn--faded-purple

268 | .g-btn--dark-blue 269 |
270 |
271 | 272 |
273 |
274 |
275 | #11 List Of Colorful Gradient Buttons 276 |
277 |

278 | In the Buttons you can see the classes they belong to. 279 |

280 | .g-btn--yellow-to-purple

281 | .g-btn--aqua-to-blue

282 | .g-btn--yellow-to-orange

283 | .g-btn--green-to-purple

284 | .g-btn--pink-to-purple

285 | .g-btn--pink-to-orange

286 | .g-btn--purple-to-aqua

287 | .g-btn--aqua-to-green

288 | .g-btn--purple-to-blue

289 | .g-btn--aqua-to-white

290 | .g-btn--yellow-to-green

291 | .g-btn--blue-to-pink 292 |
293 |
294 | 295 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | 2 | /* ********************************************** 3 | Begin prism-core.js 4 | ********************************************** */ 5 | 6 | var _self = (typeof window !== 'undefined') 7 | ? window // if in browser 8 | : ( 9 | (typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope) 10 | ? self // if in worker 11 | : {} // if in node js 12 | ); 13 | 14 | /** 15 | * Prism: Lightweight, robust, elegant syntax highlighting 16 | * MIT license http://www.opensource.org/licenses/mit-license.php/ 17 | * @author Lea Verou http://lea.verou.me 18 | */ 19 | 20 | var Prism = (function(){ 21 | 22 | // Private helper vars 23 | var lang = /\blang(?:uage)?-(\w+)\b/i; 24 | var uniqueId = 0; 25 | 26 | var _ = _self.Prism = { 27 | manual: _self.Prism && _self.Prism.manual, 28 | util: { 29 | encode: function (tokens) { 30 | if (tokens instanceof Token) { 31 | return new Token(tokens.type, _.util.encode(tokens.content), tokens.alias); 32 | } else if (_.util.type(tokens) === 'Array') { 33 | return tokens.map(_.util.encode); 34 | } else { 35 | return tokens.replace(/&/g, '&').replace(/ text.length) { 300 | // Something went terribly wrong, ABORT, ABORT! 301 | return; 302 | } 303 | 304 | if (str instanceof Token) { 305 | continue; 306 | } 307 | 308 | pattern.lastIndex = 0; 309 | 310 | var match = pattern.exec(str), 311 | delNum = 1; 312 | 313 | // Greedy patterns can override/remove up to two previously matched tokens 314 | if (!match && greedy && i != strarr.length - 1) { 315 | pattern.lastIndex = pos; 316 | match = pattern.exec(text); 317 | if (!match) { 318 | break; 319 | } 320 | 321 | var from = match.index + (lookbehind ? match[1].length : 0), 322 | to = match.index + match[0].length, 323 | k = i, 324 | p = pos; 325 | 326 | for (var len = strarr.length; k < len && (p < to || (!strarr[k].type && !strarr[k - 1].greedy)); ++k) { 327 | p += strarr[k].length; 328 | // Move the index i to the element in strarr that is closest to from 329 | if (from >= p) { 330 | ++i; 331 | pos = p; 332 | } 333 | } 334 | 335 | /* 336 | * If strarr[i] is a Token, then the match starts inside another Token, which is invalid 337 | * If strarr[k - 1] is greedy we are in conflict with another greedy pattern 338 | */ 339 | if (strarr[i] instanceof Token || strarr[k - 1].greedy) { 340 | continue; 341 | } 342 | 343 | // Number of tokens to delete and replace with the new match 344 | delNum = k - i; 345 | str = text.slice(pos, p); 346 | match.index -= pos; 347 | } 348 | 349 | if (!match) { 350 | if (oneshot) { 351 | break; 352 | } 353 | 354 | continue; 355 | } 356 | 357 | if(lookbehind) { 358 | lookbehindLength = match[1].length; 359 | } 360 | 361 | var from = match.index + lookbehindLength, 362 | match = match[0].slice(lookbehindLength), 363 | to = from + match.length, 364 | before = str.slice(0, from), 365 | after = str.slice(to); 366 | 367 | var args = [i, delNum]; 368 | 369 | if (before) { 370 | ++i; 371 | pos += before.length; 372 | args.push(before); 373 | } 374 | 375 | var wrapped = new Token(token, inside? _.tokenize(match, inside) : match, alias, match, greedy); 376 | 377 | args.push(wrapped); 378 | 379 | if (after) { 380 | args.push(after); 381 | } 382 | 383 | Array.prototype.splice.apply(strarr, args); 384 | 385 | if (delNum != 1) 386 | _.matchGrammar(text, strarr, grammar, i, pos, true, token); 387 | 388 | if (oneshot) 389 | break; 390 | } 391 | } 392 | } 393 | }, 394 | 395 | tokenize: function(text, grammar, language) { 396 | var strarr = [text]; 397 | 398 | var rest = grammar.rest; 399 | 400 | if (rest) { 401 | for (var token in rest) { 402 | grammar[token] = rest[token]; 403 | } 404 | 405 | delete grammar.rest; 406 | } 407 | 408 | _.matchGrammar(text, strarr, grammar, 0, 0, false); 409 | 410 | return strarr; 411 | }, 412 | 413 | hooks: { 414 | all: {}, 415 | 416 | add: function (name, callback) { 417 | var hooks = _.hooks.all; 418 | 419 | hooks[name] = hooks[name] || []; 420 | 421 | hooks[name].push(callback); 422 | }, 423 | 424 | run: function (name, env) { 425 | var callbacks = _.hooks.all[name]; 426 | 427 | if (!callbacks || !callbacks.length) { 428 | return; 429 | } 430 | 431 | for (var i=0, callback; callback = callbacks[i++];) { 432 | callback(env); 433 | } 434 | } 435 | } 436 | }; 437 | 438 | var Token = _.Token = function(type, content, alias, matchedStr, greedy) { 439 | this.type = type; 440 | this.content = content; 441 | this.alias = alias; 442 | // Copy of the full string this token was created from 443 | this.length = (matchedStr || "").length|0; 444 | this.greedy = !!greedy; 445 | }; 446 | 447 | Token.stringify = function(o, language, parent) { 448 | if (typeof o == 'string') { 449 | return o; 450 | } 451 | 452 | if (_.util.type(o) === 'Array') { 453 | return o.map(function(element) { 454 | return Token.stringify(element, language, o); 455 | }).join(''); 456 | } 457 | 458 | var env = { 459 | type: o.type, 460 | content: Token.stringify(o.content, language, parent), 461 | tag: 'span', 462 | classes: ['token', o.type], 463 | attributes: {}, 464 | language: language, 465 | parent: parent 466 | }; 467 | 468 | if (env.type == 'comment') { 469 | env.attributes['spellcheck'] = 'true'; 470 | } 471 | 472 | if (o.alias) { 473 | var aliases = _.util.type(o.alias) === 'Array' ? o.alias : [o.alias]; 474 | Array.prototype.push.apply(env.classes, aliases); 475 | } 476 | 477 | _.hooks.run('wrap', env); 478 | 479 | var attributes = Object.keys(env.attributes).map(function(name) { 480 | return name + '="' + (env.attributes[name] || '').replace(/"/g, '"') + '"'; 481 | }).join(' '); 482 | 483 | return '<' + env.tag + ' class="' + env.classes.join(' ') + '"' + (attributes ? ' ' + attributes : '') + '>' + env.content + ''; 484 | 485 | }; 486 | 487 | if (!_self.document) { 488 | if (!_self.addEventListener) { 489 | // in Node.js 490 | return _self.Prism; 491 | } 492 | // In worker 493 | _self.addEventListener('message', function(evt) { 494 | var message = JSON.parse(evt.data), 495 | lang = message.language, 496 | code = message.code, 497 | immediateClose = message.immediateClose; 498 | 499 | _self.postMessage(_.highlight(code, _.languages[lang], lang)); 500 | if (immediateClose) { 501 | _self.close(); 502 | } 503 | }, false); 504 | 505 | return _self.Prism; 506 | } 507 | 508 | //Get current script and highlight 509 | var script = document.currentScript || [].slice.call(document.getElementsByTagName("script")).pop(); 510 | 511 | if (script) { 512 | _.filename = script.src; 513 | 514 | if (document.addEventListener && !_.manual && !script.hasAttribute('data-manual')) { 515 | if(document.readyState !== "loading") { 516 | if (window.requestAnimationFrame) { 517 | window.requestAnimationFrame(_.highlightAll); 518 | } else { 519 | window.setTimeout(_.highlightAll, 16); 520 | } 521 | } 522 | else { 523 | document.addEventListener('DOMContentLoaded', _.highlightAll); 524 | } 525 | } 526 | } 527 | 528 | return _self.Prism; 529 | 530 | })(); 531 | 532 | if (typeof module !== 'undefined' && module.exports) { 533 | module.exports = Prism; 534 | } 535 | 536 | // hack for components to work correctly in node.js 537 | if (typeof global !== 'undefined') { 538 | global.Prism = Prism; 539 | } 540 | 541 | 542 | /* ********************************************** 543 | Begin prism-markup.js 544 | ********************************************** */ 545 | 546 | Prism.languages.markup = { 547 | 'comment': //, 548 | 'prolog': /<\?[\s\S]+?\?>/, 549 | 'doctype': //i, 550 | 'cdata': //i, 551 | 'tag': { 552 | pattern: /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\s\S])*\1|[^\s'">=]+))?)*\s*\/?>/i, 553 | inside: { 554 | 'tag': { 555 | pattern: /^<\/?[^\s>\/]+/i, 556 | inside: { 557 | 'punctuation': /^<\/?/, 558 | 'namespace': /^[^\s>\/:]+:/ 559 | } 560 | }, 561 | 'attr-value': { 562 | pattern: /=(?:('|")[\s\S]*?(\1)|[^\s>]+)/i, 563 | inside: { 564 | 'punctuation': /[=>"']/ 565 | } 566 | }, 567 | 'punctuation': /\/?>/, 568 | 'attr-name': { 569 | pattern: /[^\s>\/]+/, 570 | inside: { 571 | 'namespace': /^[^\s>\/:]+:/ 572 | } 573 | } 574 | 575 | } 576 | }, 577 | 'entity': /&#?[\da-z]{1,8};/i 578 | }; 579 | 580 | // Plugin to make entity title show the real entity, idea by Roman Komarov 581 | Prism.hooks.add('wrap', function(env) { 582 | 583 | if (env.type === 'entity') { 584 | env.attributes['title'] = env.content.replace(/&/, '&'); 585 | } 586 | }); 587 | 588 | Prism.languages.xml = Prism.languages.markup; 589 | Prism.languages.html = Prism.languages.markup; 590 | Prism.languages.mathml = Prism.languages.markup; 591 | Prism.languages.svg = Prism.languages.markup; 592 | 593 | 594 | /* ********************************************** 595 | Begin prism-css.js 596 | ********************************************** */ 597 | 598 | Prism.languages.css = { 599 | 'comment': /\/\*[\s\S]*?\*\//, 600 | 'atrule': { 601 | pattern: /@[\w-]+?.*?(;|(?=\s*\{))/i, 602 | inside: { 603 | 'rule': /@[\w-]+/ 604 | // See rest below 605 | } 606 | }, 607 | 'url': /url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i, 608 | 'selector': /[^\{\}\s][^\{\};]*?(?=\s*\{)/, 609 | 'string': { 610 | pattern: /("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, 611 | greedy: true 612 | }, 613 | 'property': /(\b|\B)[\w-]+(?=\s*:)/i, 614 | 'important': /\B!important\b/i, 615 | 'function': /[-a-z0-9]+(?=\()/i, 616 | 'punctuation': /[(){};:]/ 617 | }; 618 | 619 | Prism.languages.css['atrule'].inside.rest = Prism.util.clone(Prism.languages.css); 620 | 621 | if (Prism.languages.markup) { 622 | Prism.languages.insertBefore('markup', 'tag', { 623 | 'style': { 624 | pattern: /()[\s\S]*?(?=<\/style>)/i, 625 | lookbehind: true, 626 | inside: Prism.languages.css, 627 | alias: 'language-css' 628 | } 629 | }); 630 | 631 | Prism.languages.insertBefore('inside', 'attr-value', { 632 | 'style-attr': { 633 | pattern: /\s*style=("|').*?\1/i, 634 | inside: { 635 | 'attr-name': { 636 | pattern: /^\s*style/i, 637 | inside: Prism.languages.markup.tag.inside 638 | }, 639 | 'punctuation': /^\s*=\s*['"]|['"]\s*$/, 640 | 'attr-value': { 641 | pattern: /.+/i, 642 | inside: Prism.languages.css 643 | } 644 | }, 645 | alias: 'language-css' 646 | } 647 | }, Prism.languages.markup.tag); 648 | } 649 | 650 | /* ********************************************** 651 | Begin prism-clike.js 652 | ********************************************** */ 653 | 654 | Prism.languages.clike = { 655 | 'comment': [ 656 | { 657 | pattern: /(^|[^\\])\/\*[\s\S]*?\*\//, 658 | lookbehind: true 659 | }, 660 | { 661 | pattern: /(^|[^\\:])\/\/.*/, 662 | lookbehind: true 663 | } 664 | ], 665 | 'string': { 666 | pattern: /(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, 667 | greedy: true 668 | }, 669 | 'class-name': { 670 | pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i, 671 | lookbehind: true, 672 | inside: { 673 | punctuation: /(\.|\\)/ 674 | } 675 | }, 676 | 'keyword': /\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/, 677 | 'boolean': /\b(true|false)\b/, 678 | 'function': /[a-z0-9_]+(?=\()/i, 679 | 'number': /\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i, 680 | 'operator': /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/, 681 | 'punctuation': /[{}[\];(),.:]/ 682 | }; 683 | 684 | 685 | /* ********************************************** 686 | Begin prism-javascript.js 687 | ********************************************** */ 688 | 689 | Prism.languages.javascript = Prism.languages.extend('clike', { 690 | 'keyword': /\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/, 691 | 'number': /\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/, 692 | // Allow for all non-ASCII characters (See http://stackoverflow.com/a/2008444) 693 | 'function': /[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i, 694 | 'operator': /-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/ 695 | }); 696 | 697 | Prism.languages.insertBefore('javascript', 'keyword', { 698 | 'regex': { 699 | pattern: /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/, 700 | lookbehind: true, 701 | greedy: true 702 | } 703 | }); 704 | 705 | Prism.languages.insertBefore('javascript', 'string', { 706 | 'template-string': { 707 | pattern: /`(?:\\\\|\\?[^\\])*?`/, 708 | greedy: true, 709 | inside: { 710 | 'interpolation': { 711 | pattern: /\$\{[^}]+\}/, 712 | inside: { 713 | 'interpolation-punctuation': { 714 | pattern: /^\$\{|\}$/, 715 | alias: 'punctuation' 716 | }, 717 | rest: Prism.languages.javascript 718 | } 719 | }, 720 | 'string': /[\s\S]+/ 721 | } 722 | } 723 | }); 724 | 725 | if (Prism.languages.markup) { 726 | Prism.languages.insertBefore('markup', 'tag', { 727 | 'script': { 728 | pattern: /()[\s\S]*?(?=<\/script>)/i, 729 | lookbehind: true, 730 | inside: Prism.languages.javascript, 731 | alias: 'language-javascript' 732 | } 733 | }); 734 | } 735 | 736 | Prism.languages.js = Prism.languages.javascript; 737 | 738 | /* ********************************************** 739 | Begin prism-file-highlight.js 740 | ********************************************** */ 741 | 742 | (function () { 743 | if (typeof self === 'undefined' || !self.Prism || !self.document || !document.querySelector) { 744 | return; 745 | } 746 | 747 | self.Prism.fileHighlight = function() { 748 | 749 | var Extensions = { 750 | 'js': 'javascript', 751 | 'py': 'python', 752 | 'rb': 'ruby', 753 | 'ps1': 'powershell', 754 | 'psm1': 'powershell', 755 | 'sh': 'bash', 756 | 'bat': 'batch', 757 | 'h': 'c', 758 | 'tex': 'latex' 759 | }; 760 | 761 | if(Array.prototype.forEach) { // Check to prevent error in IE8 762 | Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function (pre) { 763 | var src = pre.getAttribute('data-src'); 764 | 765 | var language, parent = pre; 766 | var lang = /\blang(?:uage)?-(?!\*)(\w+)\b/i; 767 | while (parent && !lang.test(parent.className)) { 768 | parent = parent.parentNode; 769 | } 770 | 771 | if (parent) { 772 | language = (pre.className.match(lang) || [, ''])[1]; 773 | } 774 | 775 | if (!language) { 776 | var extension = (src.match(/\.(\w+)$/) || [, ''])[1]; 777 | language = Extensions[extension] || extension; 778 | } 779 | 780 | var code = document.createElement('code'); 781 | code.className = 'language-' + language; 782 | 783 | pre.textContent = ''; 784 | 785 | code.textContent = 'Loading…'; 786 | 787 | pre.appendChild(code); 788 | 789 | var xhr = new XMLHttpRequest(); 790 | 791 | xhr.open('GET', src, true); 792 | 793 | xhr.onreadystatechange = function () { 794 | if (xhr.readyState == 4) { 795 | 796 | if (xhr.status < 400 && xhr.responseText) { 797 | code.textContent = xhr.responseText; 798 | 799 | Prism.highlightElement(code); 800 | } 801 | else if (xhr.status >= 400) { 802 | code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText; 803 | } 804 | else { 805 | code.textContent = '✖ Error: File does not exist or is empty'; 806 | } 807 | } 808 | }; 809 | 810 | xhr.send(null); 811 | }); 812 | } 813 | 814 | }; 815 | 816 | document.addEventListener('DOMContentLoaded', self.Prism.fileHighlight); 817 | 818 | })(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gradient-buttons", 3 | "version": "1.0.0", 4 | "description": "Lightweight Css Gradient Buttons", 5 | "main": "gulpfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Yasin Softaoğlu", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "babel-preset-es2015": "^6.24.1", 13 | "browser-sync": "^2.18.12", 14 | "gulp": "^3.9.1", 15 | "gulp-autoprefixer": "^4.0.0", 16 | "gulp-babel": "^6.1.2", 17 | "gulp-concat": "^2.6.1", 18 | "gulp-plumber": "^1.1.0", 19 | "gulp-sass": "^3.1.0", 20 | "gulp-uglify": "^3.0.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /sass/main.sass: -------------------------------------------------------------------------------- 1 | $global-padding: 30px 2 | $logo-text-color: #B239FF 3 | $main-color: #546E7A 4 | 5 | ::selection 6 | background-color: #f7fbff 7 | 8 | * 9 | box-sizing: border-box 10 | 11 | body 12 | font-size: 14px 13 | margin: 0 14 | color: $main-color 15 | padding: 0 16 | font-family: 'Montserrat' !important 17 | 18 | button, 19 | pre, 20 | code 21 | font-family: 'Montserrat' !important 22 | 23 | .u-text-center 24 | text-align: center !important 25 | 26 | .u-block 27 | display: block !important 28 | 29 | .mb-15 30 | margin-bottom: 15px !important 31 | 32 | .mt-15 33 | margin-top: 15px !important 34 | 35 | .text 36 | line-height: 24px 37 | 38 | .container 39 | width: 50% 40 | margin: 0 auto 41 | @media (max-width: 850px) 42 | width: 100% 43 | 44 | pre[class*="language-"] 45 | background-color: transparent !important 46 | margin: 0 47 | padding: 0 48 | 49 | .link 50 | color: #5893FE 51 | 52 | .hero 53 | padding: $global-padding 54 | background: linear-gradient(#faf0ff, #fff) 55 | &__logo 56 | width: 50px 57 | &__logo-text 58 | color: $logo-text-color 59 | font-size: 17px 60 | margin-top: 5px 61 | &__desc 62 | margin-top: 15px 63 | 64 | .info 65 | padding: $global-padding 66 | border-top: 1px solid #ece5ff 67 | &__title 68 | font-size: 20px 69 | color: #5f6f77 70 | span 71 | color: #d4c2ff 72 | font-size: 30px 73 | margin-right: 3px 74 | &__code 75 | background-color: #fbf3ff 76 | padding: 15px 77 | letter-spacing: 1px 78 | .token.tag 79 | line-height: 30px 80 | &__highlight 81 | background-color: #fffaec 82 | padding: 2px 83 | color: #000 84 | 85 | .footer 86 | padding: $global-padding 87 | border-top: 1px solid #ece5ff 88 | &__copy 89 | font-size: 13px --------------------------------------------------------------------------------