Position Image Sprite with CSS on a button
- Block & inline method
http://dabblet.com/gist/2213271
- Absolute method
http://dabblet.com/gist/2213121
How to position css sprite play button within video image
Try something like
a { display: block; position: relative; }
a span { position: absolute; left: 100px; top: 80px; }
http://jsfiddle.net/PyJXh/7/
This might not be the exact center, you need to set the correct left
and top
depending on your image.
CSS Sprites - How to Align-bottom all Sprite Buttons
This seems like more of a photoshop-chopping question than anything. Here's how I would approach, assuming that your markup is structured as follows:
<nav>
<ul>
<li class="icon-a">
<a>
<span class="icon"></span>
Text
</a>
</li>
<li class="icon-b">
<a>
<span class="icon"></span>
Text
</a>
</li>
</ul>
</nav>
Find height of the tallest icon and set that as the height of your <li>
. Then find the width of the widest icon and set that as the width of your <li>
.
You'll have to layout the icons in your sprite file very carefully, and space the icons evenly according to max width and height that I mentioned above (I would use photoshop rulers and guides to create a grid make your life easier). Each icon state should be in a row. The key to aligning the icons on the bottom is how you lay out the icons in photoshop.
I would do it this way assuming your tallest icon is 40px and your widest icon is 30px. I am setting the height to 60px so there is room at the bottom for the text to go underneath the icon.
nav li {
width: 30px;
height: 60px;
display: block;
float: left;
}
nav li a {
width: 30px;
height: 60px;
line-height: 15px;
display: block;
text-align: center
}
nav li a span {
width: 30px;
height: 40px;
padding-bottom: 5px;
display: block;
background: url(icons.png) no-repeat
}
nav li.icon-a span {background-position: 0 0}
nav li.icon-a span:hover {background-position: 0 -40px}
nav li.icon-a span:active {background-position: 0 -80px}
nav li.icon-b span {background-position: -30px 0}
nav li.icon-b span:hover {background-position: -30px -40px}
nav li.icon-b span:active {background-position: -30px -80px}
How can I apply percentage-based positioning to background-image sprites with pure CSS?
The width of the sprite depends on the amount of icons (images) in the sprite: one icon should (generally) be 100% of the width of the button it has to cover. So for 8 icons:
background-position: 800%;
The offset for an icon i (first: i=1, second i=2, etc) with a total number of icons n is calculated like this:
Offset in percent = (i - 1 / n - 1) * 100%
So for the 5th icon 8 in the first row of the sprite the offset = (5-1/8-1)*100% = 57,142 %
background-position: 57.142 top;
SASS mixin:
@mixin background-position($number: 1){
$total: 8; /* The number of icons in the sprite, placed next to one another */
background-size: percentage($total); /* Results in 800% for 8 icons */
background-position: percentage( ($number - 1)/($total - 1) ) top; /* My sprite has the default state in the top row, :active states in the bottom */
}
Using a pre processor like SASS offers you the flexibility to add icons to the sprite at a later stage without you having to change all previously calculated background positions.
Of course this solution works for any element with a background image, not just buttons.
CSS Sprite Button
Is that what you want to get: http://jsfiddle.net/PZh9F/37/ ?
CSS:
#menu { left:10px; top:50px; height:300px; width: 147px; position:fixed; }
.sprite { background: url('http://www.jp2code.net/logos/jp2Rollover.png') 0px -100px no-repeat; height:50px; padding-left: 50px; width:147px; z-index:1; }
.sprite a { background-position: 0px 100px; color:Red; vertical-align: middle; }
.sprite.current { background-position: 0px 0px; }
.sprite:hover { background-position: 0px -50px; }
.sprite:hover a { color:Yellow; }
And HTML:
<html>
<body>
<ul id="menu">
<li class="sprite current">You Are Here</li>
<li class="sprite"><a href="#A">Contact</li>
<li class="sprite"><a href="#B">Projects</li>
</ul>
</body>
</html>
How to center the positioning of the css button?
I suggest using flexbox. Simply wrap your button inside a div
Element, set the div
's display
property to flex
and the justify-content
property to center
and you're done.
Since you didn't share a code snippet, I made my own, minimalist code snippet.
<html>
<head>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="flex-container">
<button class="btn">some button</button>
</div>
</body>
</html>
And here's the CSS to go along with it:
.flex-container {
display: flex;
justify-content: center;
}
A complete guide to flexbox can be found here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS-HTML: how to position and anchor buttons next to an image
I would do css with container. you can add row and columns between containers if you would like. Edit button position with "top" and "left" in css.
.container {
position: relative;
left:20%;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.btn {
position: absolute;
top: 50%;
left: -20%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.btn:hover {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="container">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button 1</button>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button 2</button>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
<button class="btn">Button 3</button>
</div>
</body>
</html>
CSS: Implementing CSS Sprites with input button image
The problem here is the default css that the browser uses on elements. You should try resetting that css. I often use the following snippet:
/* reset css of buttons */
.cssresetbutton {
border-width: 0px;
border-style: none;
background: inherit;
font: inherit;
color: blue;
padding: 0px; }
.cssresetbutton:active {
border-width: 0px;
border-style: none;
background: inherit;
outline: 0;
box-shadow: none; }
try adding the cssresetbutton class to your input element and see if it works.
EDIT:
You can also try not using a input[type=submit] element. For example:
<span id="search-button" class="sprites1" onClick="document.getElementById('formid').submit()"></span>
It will submit the form#formid element when clicked.
Related Topics
Attr as Property in CSS Selector
Postcss - Color Function Plugin - "Unable to Parse Color from String"
Change Text Color for Gtktoggletoolbutton in C Code (Gtk+3)
Primefaces Elements Can't Load a Url of My CSS File
CSS or HTML5 for First and Last Elements
How to Integrate CSS Pre-Processing Within Eclipse
How to Position Elements to The Right in Md-Toolbar
Select The Last 3 Child Elements
Neatly Display Images of Different Sizes Sequentially in The Same UI Element
Site Doesn't Look Right in Mobile Browser
Why Jquery UI Button Looks Different in Firefox and Chrome
Less CSS Compiler. Unable to Use Darken Property