Design af knapper søges

Brian Rønnow:

Prøv at se på denne siden http://buttonoptimizer.com/#

Findes der tilsvarende muligheder online hvor man kan uploade sit eget icon eller billede til brug i knappen.

.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #a12727;
border-radius: 8px;
background: #992828;
background: -webkit-gradient(linear, left top, left bottom, from(#ff4a4a), to(#992727));
background: -moz-linear-gradient(top, #ff4a4a, #992727);
background: linear-gradient(to bottom, #ff4a4a, #992727);
-webkit-box-shadow: #ff5959 0px 0px 40px 0px;
-moz-box-shadow: #ff5959 0px 0px 40px 0px;
box-shadow: #ff5959 0px 0px 40px 0px;
text-shadow: #591717 1px 1px 1px;
font: normal normal bold 20px arial;
color: #ffffff;
text-decoration: none;
}
.button:hover,
.button:focus {
background: #992828;
background: -webkit-gradient(linear, left top, left bottom, from(#ff5959), to(#b62f2f));
background: -moz-linear-gradient(top, #ff5959, #b62f2f);
background: linear-gradient(to bottom, #ff5959, #b62f2f);
color: #ffffff;
text-decoration: none;
}
.button:active {
background: #982727;
background: -webkit-gradient(linear, left top, left bottom, from(#982727), to(#982727));
background: -moz-linear-gradient(top, #982727, #982727);
background: linear-gradient(to bottom, #982727, #982727);
}
.button:before{
content: "\0000a0";
display: inline-block;
height: 24px;
width: 24px;
line-height: 24px;
margin: 0 4px -6px -4px;
position: relative;
top: 0px;
left: 0px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEsklEQVRIia2VW2wUZRzFfzs72y677crSUlrSQqmlmrZUrEGq9AEblQeUB2NEk4pSvITwIIkvohAe0BiDmiBRoojE4APRBOIDSljEtNYCQhGlNKWX7fZid9lt99a9ze7MfD7MFFZjFNR/cjKZL9/8z/+cOfONldus0nmU3+WmZaGdUjVHOq2Tvt0ef1tvr3cdFv4fhD5yQoTPvKl4drb++Ey9taNAwv6/ELzzuPsrkZwUYnZCiNlJIVIBIaY6Re+7j1xrXkTrn/dLt80gBChRExFIBsHmpnnzvrrOo7u+31gvd/w3AgRk46DE8oiikA5RVLdO/uyj1w6ureSxf00g1DSi90MYOwnpoEkUMUgy0ziWtkiH3lh3yGWjFMDqtFFU46J2JkME0P+JYE2F9tSy5JX6RF8XFu9JCheUgN0NagrUDOSSuKtqnKHLZ/Rz4+p31o1NbD91oP34ppbijlULsy0FIjU/kyEVUQgbfvyxaktYe2cJK2wyciajoHp/wlmxGGwOUNOgpUFAhc1f+YnH/7GlvYk9R/Zv24lzqelvhNy0l6HBIV9Pr6/bcyXiuTBB92gMn6mwFKguc1LX3sSWl+6jraqmHEfrVtA0cySBcr2P5ZuO3yNnNXKEvSA5bwxscy+lvmVZdf0DevULarQ9Gx5naMQ33H1pquvkr7Oe86N0+5Ncev8s31ybYfenTwa2O5RxsDiMlGlQaLdR6mSJPBFjWETHsBRXgdBvuiIJIwKSoKB0MQ1llbUNa/Tal9VYRyYS0L/1XD71xP7U+hOD7PZ4WfusHl4JikGgW2DmPJKEJI9GGUiEQxSXRQwCiwArxsa5WGLe60bu7JawVJJN1ZkpjPtzBQNIyko0xWge7gdlDCSQQ0kmA9PxeLESdoF+s7k1rzlzanTE1BDBc9eZTRqJq1lA44sbyzegx0DLQXwYlDBIoGvosiaIjgaV8eWR/kaKSgGroUISRv8bSjS0ER+B3hTjaeKvn2ZvWx1th3fccdhdMc+BMgLpEMYLgFQQYhmmZSB79TreRzP+RvQAOJxgd4DFBpIlL6Aaogwc98okR0X0813SqysaCuqssgbZIcNem2laFrxe4hNxfDLAL376kdmALIAEaAlQAUkyYLWABWQXuN3wcANLECqInKGy0Bh8Dumr8PU1unIaQRlgeIafBWCRgTnYAFk3Ya5ZTVhMYH4ZutlcB/UKTP2GevAi+wBdBhgJM5hWwOEyG9gMmQigKG/NahLln2DCJFAg1wNBL7x3gS/GwnRhbic4y2QgRrymHBc2EDEI9xq2uqvBugJYlEci5SlQQIxCohsiGTg6TNeBHnaYIxoEuiDqDeKraaRJ+CHUD+MaKdmClPBhd3qhaDEU3g1SOWAHoYI2DalBiI1DVsD+Sxz7oItXgMCcQNm8qn1jeB/qoykYgr40gee+ZGsmR2bz/Wx7upG2ijAO+TzI88BqJhkVEjl0zyQDezvZNxDgKBDPM/CGUJ5fzZ63Wtl5eoq+bcfYklC4aLpbZLNS31xFW3Mlq6rclNttSKEE8asBBs6O0hmapQcI8nfHfeV8HuxYzRGrRC1//SOSDHNwmXDkOXBLJQEFt/PArdTvxlkxaAvP728AAAAASUVORK5CYII=") no-repeat left center transparent;
background-size: 100% 100%;
}Dette er css koden fra deres pre-button background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAEsklEQVRIia2VW2wUZRzFfzs72y677crSUlrSQqmlmrZUrEGq9AEblQeUB2NEk4pSvITwIIkvohAe0BiDmiBRoojE4APRBOIDSljEtNYCQhGlNKWX7fZid9lt99a9ze7MfD7MFFZjFNR/cjKZL9/8z/+cOfONldus0nmU3+WmZaGdUjVHOq2Tvt0ef1tvr3cdFv4fhD5yQoTPvKl4drb++Ey9taNAwv6/ELzzuPsrkZwUYnZCiNlJIVIBIaY6Re+7j1xrXkTrn/dLt80gBChRExFIBsHmpnnzvrrOo7u+31gvd/w3AgRk46DE8oiikA5RVLdO/uyj1w6ureSxf00g1DSi90MYOwnpoEkUMUgy0ziWtkiH3lh3yGWjFMDqtFFU46J2JkME0P+JYE2F9tSy5JX6RF8XFu9JCheUgN0NagrUDOSSuKtqnKHLZ/Rz4+p31o1NbD91oP34ppbijlULsy0FIjU/kyEVUQgbfvyxaktYe2cJK2wyciajoHp/wlmxGGwOUNOgpUFAhc1f+YnH/7GlvYk9R/Zv24lzqelvhNy0l6HBIV9Pr6/bcyXiuTBB92gMn6mwFKguc1LX3sSWl+6jraqmHEfrVtA0cySBcr2P5ZuO3yNnNXKEvSA5bwxscy+lvmVZdf0DevULarQ9Gx5naMQ33H1pquvkr7Oe86N0+5Ncev8s31ybYfenTwa2O5RxsDiMlGlQaLdR6mSJPBFjWETHsBRXgdBvuiIJIwKSoKB0MQ1llbUNa/Tal9VYRyYS0L/1XD71xP7U+hOD7PZ4WfusHl4JikGgW2DmPJKEJI9GGUiEQxSXRQwCiwArxsa5WGLe60bu7JawVJJN1ZkpjPtzBQNIyko0xWge7gdlDCSQQ0kmA9PxeLESdoF+s7k1rzlzanTE1BDBc9eZTRqJq1lA44sbyzegx0DLQXwYlDBIoGvosiaIjgaV8eWR/kaKSgGroUISRv8bSjS0ER+B3hTjaeKvn2ZvWx1th3fccdhdMc+BMgLpEMYLgFQQYhmmZSB79TreRzP+RvQAOJxgd4DFBpIlL6Aaogwc98okR0X0813SqysaCuqssgbZIcNem2laFrxe4hNxfDLAL376kdmALIAEaAlQAUkyYLWABWQXuN3wcANLECqInKGy0Bh8Dumr8PU1unIaQRlgeIafBWCRgTnYAFk3Ya5ZTVhMYH4ZutlcB/UKTP2GevAi+wBdBhgJM5hWwOEyG9gMmQigKG/NahLln2DCJFAg1wNBL7x3gS/GwnRhbic4y2QgRrymHBc2EDEI9xq2uqvBugJYlEci5SlQQIxCohsiGTg6TNeBHnaYIxoEuiDqDeKraaRJ+CHUD+MaKdmClPBhd3qhaDEU3g1SOWAHoYI2DalBiI1DVsD+Sxz7oItXgMCcQNm8qn1jeB/qoykYgr40gee+ZGsmR2bz/Wx7upG2ijAO+TzI88BqJhkVEjl0zyQDezvZNxDgKBDPM/CGUJ5fzZ63Wtl5eoq+bcfYklC4aLpbZLNS31xFW3Mlq6rclNttSKEE8asBBs6O0hmapQcI8nfHfeV8HuxYzRGrRC1//SOSDHNwmXDkOXBLJQEFt/PArdTvxlkxaAvP728AAAAASUVORK5CYII=") no-repeat left center transparent;

;

Denne kode her skal du skifte ud med der hvor du har dit billede. Det kunne ligge i din image mappe på webhotellet så ville koden være background: url("data:image/button.png") no-repeat left center transparent; jeg er ikke lige klar over hvor der er generel information