Button css html image

Hey have an image button that I want to make into html / css, can I have the blue part of the css and the cart part as a small picture?

The image and button example:
the image and button example
Code tothe button:
 font-family: Bebas Neue,Arial, verdana;
      font-size: 17pt;
      color:#000000;
	-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
	box-shadow:inset 0px 0px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
	background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
	background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
	background-color:#f9f9f9;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	


	padding:10px 5px 10px 5px;
    width: 100%;
	text-decoration:none;
	text-shadow:-1px 0px 0px #ffffff;

Open in new window

MickeCAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
You are using bootstrap.  You have some choices.  Either create multiple buttons and use visible and hidden based on size (.visible-xs) see http://getbootstrap.com/css/#responsive-utilities-tests

Or you can use your own media queries and specify the options for your button in each of

@media (max-width: 768px { ... }
@media (min-width: 769px) and (max-width: 792px) { ... }
@media (min-width: 793px) and (max-width: 1200px) { ... }
@media (min-width: 1200px) { ... }

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
you can have an image and a gradient at the same time:
background:url(path/to/image.png), -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
background:url(path/to/image.png), -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:url(path/to/image.png), -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:url(path/to/image.png), -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:url(path/to/image.png), -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:url(path/to/image.png), linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	

Open in new window

0
 
GaryCommented:
Taking your css above just add
padding-left:40px; /* force the text over - just tweak to the width of your cart image and add a bit */
background-image:ur;(pathtoimage/image.jpg) left center;

Open in new window

Where the image is your blue cart bit.
0
 
MickeCAuthor Commented:
Thankz Kyle, in the different resolutions (responsive) do i have to meak the button smaller, or is the onother aprotch?

http://www.smavitt.se/utv/
0
 
Kyle HamiltonData ScientistCommented:
hmm. the problem is, it's a very wide button. as it is, the text doesn't fit.

I would start by making the .price-card width 100%, (or just remove the width), and make the font-size a bit smaller, so that at least in a full desktop view, the whole button can be seen.

there is no "easy" way to make the text shrink as you re-size the window, though. The boxes containing the products get pretty narrow - maybe they should have a min-width, the number of columns could reduce as the page narrows. I think this is a larger issue than just the button
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.