[Stylish] Buttons - Base64 (Firefox 3.5)

MK204

Wenn man den Code so verwendet kann es passieren dass sämtliche Buttons auf diversen Internetseiten auf einmal anders aussehen gg

CSS

button:active,input[type="submit"]:active{font-weight: bold !important;}
button:hover,input[type="submit"]:hover {opacity: .9 !important; color: #00ff00 !important; font-weight: bold !important; } button,input[type="submit"]
{ -moz-appearance: none !important; color: #fff !important; font-weight: bold !important; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABiCAIAAAAeFy4
qAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH2AIDCygxWhqJHQAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAAD
nRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh
0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAASUlEQVR4nN2OywkAIQxEZfrvx5M9WJBv8GCCCrsNGAgk82NKbV02AguGwPEjgwgusdzF+dAEdnriXrg/dVdOege7k7f+p2d5YCZtF5EcLum
tXgAAAABJRU5ErkJggg==") repeat center !important;}

deswegen sollte man immer ein " @-moz-document url-prefix("https://www.camp-firefox.de") { Hier kommt der code rein} } " dazunehmen, in dem fall habe ich mal die Seite von hier genommen....

CSS

@-moz-document url-prefix("http://www.camp-firefox.de") {


button:active,input[type="submit"]:active{font-weight: bold !important;}
button:hover,input[type="submit"]:hover {opacity: .9 !important; color: #00ff00 !important; font-weight: bold !important; } button,input[type="submit"]
{ -moz-appearance: none !important; color: #fff !important; font-weight: bold !important; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABiCAIAAAAeFy4
qAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH2AIDCygxWhqJHQAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAAD
nRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh
0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAASUlEQVR4nN2OywkAIQxEZfrvx5M9WJBv8GCCCrsNGAgk82NKbV02AguGwPEjgwgusdzF+dAEdnriXrg/dVdOege7k7f+p2d5YCZtF5EcLum
tXgAAAABJRU5ErkJggg==") repeat center !important;}}

[Blockierte Grafik: http://www.abload.de/img/66unvm.png]

Man kann die Buttons für jede beliebige Seite verwenden z.b. hab ich jetzt mal diese Seite http://www.webmaster-eye.de/bild-base64-encode.html genommen und die Adresse zwischen den Klammern eingefügt

CSS

@-moz-document url-prefix("http://www.webmaster-eye.de/bild-base64-encode.html") {


button:active,input[type="submit"]:active{font-weight: bold !important;}
button:hover,input[type="submit"]:hover {opacity: .9 !important; color: #00ff00 !important; font-weight: bold !important; } button,input[type="submit"]
{ -moz-appearance: none !important; color: #fff !important; font-weight: bold !important; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABiCAIAAAAeFy4
qAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH2AIDCygxWhqJHQAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAAD
nRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh
0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAASUlEQVR4nN2OywkAIQxEZfrvx5M9WJBv8GCCCrsNGAgk82NKbV02AguGwPEjgwgusdzF+dAEdnriXrg/dVdOege7k7f+p2d5YCZtF5EcLum
tXgAAAABJRU5ErkJggg==") repeat center !important;}}

Sieht dann so aus.....

[Blockierte Grafik: http://www.abload.de/img/kiavc7.png]

Ist eigentlich ganz easy zu handhaben, die Buttons werden hiermit angesprochen...

CSS

button:active,input[type="submit"]:active{font-weight: bold !important;}
button:hover,input[type="submit"]:hover {opacity: .9 !important; color: #00ff00 !important; font-weight: bold !important; } button,input[type="submit"]

und die Farben damit....

CSS

{ -moz-appearance: none !important; color: #fff !important; font-weight: bold !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAIAAACJwFiTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
fklEQVR4nD3IwQ0CMAwDwNRN12QldmInRFsnNg8kXifdeDxf9/NGGGEgImMkYqyIBXvaE/ayE+EVXpCmhV8uuKeVUEMNSFMCuqYaEN00ukbXQF33Ne
p2UWiqqeSuZiUPRf7ZWzzJvVUnax/1SZ4fvK6bTborVbQqJVmNcITjC9YMh3jlue1kAAAAAElFTkSuQmCC") repeat center !important;}

Buttons mit Hover, also zweifarbig geht so.....

CSS

@-moz-document url-prefix("http://www.camp-firefox.de") {


button:hover,input[type="submit"]:hover 
{opacity: .9 !important; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAjCAIAAADaE/fjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
YklEQVR4nAXBSw7CQAxEwfYzn1E4IVsuzwIiViiaBLup0v1huotuYSdVTbcpQ5Won6k2btPHgSTmnHzeT9b1xbZ9ySgyQS7cO4ogleDENiVhBRHQOmOJIMnrIE/JGAuXcfsD4hY4dK
R+hIoAAAAASUVORK5CYII=") repeat center !important; font-weight: bold !important; border: none !important; }


button,input[type="submit"],button:active,input[type="submit"]:active
{ -moz-appearance: none !important; color: #fff !important; font-weight: bold !important; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA
AEAAABiCAIAAAAeFy4qAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH2AIDCygxWhqJHQAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodAC
sD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAA
Ah0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAASUlEQVR4nN2OywkAIQxEZfrvx5M9WJBv8GCCCrsNGAgk82NKbV02AguGwPEjgwgusdzF+dAEdnriXrg/dVdOege7k7f+p2d5YCZtF5E
cLumtXgAAAABJRU5ErkJggg==") repeat center !important; border: none !important;}}

Alles anzeigen

Ergebnis

[Blockierte Grafik: http://www.abload.de/img/6562095.png]

weitere Farben

Hellblaue Buttons

CSS

{ -moz-appearance: none !important; color: #fff !important; font-weight: bold !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAeCAIAAACJwFiTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
fklEQVR4nD3IwQ0CMAwDwNRN12QldmInRFsnNg8kXifdeDxf9/NGGGEgImMkYqyIBXvaE/ayE+EVXpCmhV8uuKeVUEMNSFMCuqYaEN00ukbXQF33Ne
p2UWiqqeSuZiUPRf7ZWzzJvVUnax/1SZ4fvK6bTborVbQqJVmNcITjC9YMh3jlue1kAAAAAElFTkSuQmCC") repeat center !important;}}

[Blockierte Grafik: http://www.abload.de/img/9ysgs.png]

Grau Blau mit Rand

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important; border: solid 2px #ff0000 !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAjCAIAAAAxJEzgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
oElEQVR4nAXBy00DURBE0Vs9BQwSksfyhuiIgRAI1ywQyCzwfF4X5+jt/aOP+LSc1PI8z0p5jFZS3aNpd3dob/se5L/7XZq8HQe0jzFCvB8jxOu2h/K67qG
cVJBVRuXb7TcqX6+frfLX908oj2OEdmmCOAC4FaJKOqSgAwUQrISkINClBGJ1YFQQwq2KcFQNNTRlyE/L5eHx2S/n83J5/QeDY2dqLyzG/gAAAABJRU5ErkJggg==") repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/fcfrpa7.png]

Metallic - Grün mit Rand

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important; border: solid 2px #000 !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAjCAIAAAAxJEzgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
aElEQVR4nGWMsRECMQwEF1A71EArlEo/ZCTvt+48BPLz40HJju6kBQAuzxcexP1BQrw/KLk6GUm4IRHuWIRqO7AvWDrvuCAR2ep9CbXV5ez68e4T7
ihP54anzD+ZGnI5/8POEDdAjTlfVN58sQLuB8IAAAAASUVORK5CYII=") repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/4567o5r1.png]

Gelb - Gold Schwarz gemustert

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
FklEQVR4nGM8vFyIgYGBZcsxGQYGBgAbPwMYgN0SvwAAAABJRU5ErkJggg==")repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/mkjd1wc.png]

Blau

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important;border: none !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAtCAIAAADgGZaTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAYklEQVR4nD3OwQ3CUBDE0Plujl4ojt4IkYICO+a
A4OrLcy7XG22xRSUJVrRESSSKLW3pv5WF2HAcT7btzr4/eJ0n7xk6gx1iWGuRtWgHZ75WgpHk54QabIlDImbR30skWWg+HetayAV1bVoAAAAASUVORK5CYII=")repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/blauc41d.png]

Rot

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important;border: none !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAZCAIAAAB/8tMoAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
QElEQVR4nEXLsRHEMAwDwcON+2/O1fyIFBz+5sv7PBa8rUvdiwMecBN/rRM8iYd6wKHe4gancYPb/xvigAtO+QCL3SSum+CNiAAAAABJRU5ErkJggg==")repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/rot017j.png]

Stahlblau - Schwarz gemustert

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important;border: none !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
FklEQVR4nGNMnbDuPwMDI4e+FwMDAwAftwMmhi4/EgAAAABJRU5ErkJggg==")repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/log07r.png]

Rot - Schwarz gemustert

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important;border: none !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
FklEQVR4nGPcycDAwMDA6M7AwMjAAAALNQEEU8MqlQAAAABJRU5ErkJggg==")repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/uig286.png]

Grau - Weiss gemustert

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important;border: none !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAACXBIWXMAABJ0AAASdAHeZh94AAAA
FklEQVR4nGMsqm9jYGBgZJHUYWBgAAAS6AHD1+XjDAAAAABJRU5ErkJggg==")repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/1ae0gc.png]

Metallic Blau

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important;border: none !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAjCAIAAADaE/fjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYklEQVR4nAXBSw7CQAxEwfYzn1E4IVsuzwIiViiaBLup0
v1huotuYSdVTbcpQ5Won6k2btPHgSTmnHzeT9b1xbZ9ySgyQS7cO4ogleDENiVhBRHQOmOJIMnrIE/JGAuXcfsD4hY4dKR+hIoAAAAASUVORK5CYII=")repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/1bn3ms.png]

Keine Ahnung gg

CSS

{-moz-appearance: none !important;font-weight: bold !important;color: #fff !important;border: none !important;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAjCAIAAAAxJEzgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoElEQVR4nAXB
y00DURBE0Vs9BQwSksfyhuiIgRAI1ywQyCzwfF4X5+jt/aOP+LSc1PI8z0p5jFZS3aNpd3dob/se5L/7XZq8HQe0jzFCvB8jxOu2h/K67qGcVJBVRuXb7
TcqX6+frfLX908oj2OEdmmCOAC4FaJKOqSgAwUQrISkINClBGJ1YFQQwq2KcFQNNTRlyE/L5eHx2S/n83J5/QeDY2dqLyzG/gAAAABJRU5ErkJggg==")repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/117xlw.png]

Siber - Weiss

CSS

{ -moz-appearance: none !important; color: #000 !important; font-weight: bold !important; 
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAZCAIAAACUxWgrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAP0lEQVR4nF2Lu
REAMAjDhMP+YzIGpCC5PJVPlm2ZCXhVAQIOOdVEPWXTvfx+EXHK7czsDglwNWk8pNGxDssJmMz3GyDWiZHyAAAAAElFTkSuQmCC") repeat center !important;}

[Blockierte Grafik: http://www.abload.de/img/567hwko.png]