Franchise & kæder - Få hjælp her

Svar: Design af knapper søges

DesignYOU - Allan Hansen — Wed, 23 Oct 2013 14:10:50 GMT

Martin Friis Guldborg:

Brian Rønnow:
kke mig bekendt, så skal du lave det icon og lægge det online og hente det via billedstien i css'en

Og er der et sted på nettet hvor jeg kan se hvordan man gør dette?

Google er din ven :)

Svar: Design af knapper søges

Brian Rønnow — Wed, 23 Oct 2013 14:02:27 GMT

.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

Svar: Design af knapper søges

Martin Friis Guldborg — Wed, 23 Oct 2013 13:53:03 GMT

Brian Rønnow:
kke mig bekendt, så skal du lave det icon og lægge det online og hente det via billedstien i css'en

Og er der et sted på nettet hvor jeg kan se hvordan man gør dette?

Svar: Design af knapper søges

Brian Rønnow — Wed, 23 Oct 2013 13:37:36 GMT

Martin Friis Guldborg:

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.

Ikke mig bekendt, så skal du lave det icon og lægge det online og hente det via billedstien i css'en

Svar: Design af knapper søges

Martin Friis Guldborg — Wed, 23 Oct 2013 13:25:44 GMT

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.

Svar: Design af knapper søges

OliverogSis — Wed, 23 Oct 2013 12:26:40 GMT

Kigger lige lidt med :)

Svar: Design af knapper søges

Jesper Hansen — Wed, 23 Oct 2013 12:18:33 GMT

Brian Rønnow:

Hej Allan

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

Fedt link, tak! :-)

Svar: Design af knapper søges

DesignYOU - Allan Hansen — Wed, 23 Oct 2013 12:01:18 GMT

Allan Hansen:
Men jo, desværre er det nok mere en knap jeg søger, som er lavet som png :)

Du kan selv design dem her i CSS og sætte koden ind :)

Svar: Design af knapper søges

Allan Hansen — Wed, 23 Oct 2013 11:45:23 GMT

Hej Sebastian

Super mange tak for dit svar, jeg har netop sendt dig en mail til den oplyste email adresse :)

Svar: Design af knapper søges

Sebastian K. Sørensen — Wed, 23 Oct 2013 11:39:16 GMT

Hej Allan

Jeg vil gerne lave dig den knap - gratis.

Kan du ikke sende mig en mail på sebastian@wunderwunder.dk? :-)

Svar: Design af knapper søges

Allan Hansen — Wed, 23 Oct 2013 11:38:43 GMT

Dybt værdsat at du har gidet det :) rigtig mange tak for det. Men jo, desværre er det nok mere en knap jeg søger, som er lavet som png :)

Svar: Design af knapper søges

Rasmus L. Knabe — Wed, 23 Oct 2013 11:34:39 GMT

Ja ok.. til et banner er en knap nok smartere.. lavede ellers lige et eksempel til dig her: http://codepen.io/RasmusKnabe/pen/fGoLi

Svar: Design af knapper søges

Allan Hansen — Wed, 23 Oct 2013 11:33:08 GMT

Hej Brian

Mange tak for linket - selvom det ser super smart ud, så synes jeg ikke det ligner noget jeg kan bruge til at lave den viste knap med, men måske kan jeg bruge den i andre forbindelser :)

Hej Rasmus

Desværre er mine programmeringsevner på lavt blus, så aner faktisk ikke hvordan man laver noget i css. Knappen er ment til at skulle placeres på et sliderbanner, hvorfor en billedfil i png for mig ville være mest optimal :)

Svar: Design af knapper søges

Rasmus L. Knabe — Wed, 23 Oct 2013 11:28:58 GMT

Hvorfor ikke blot lave knappen med CSS? - Det er hurtigere, lettere at vedligeholde og bedre for SEO.

Svar: Design af knapper søges

Brian Rønnow — Wed, 23 Oct 2013 11:26:20 GMT

Hej Allan

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