I made an image-button which is hovering between to pictures.
For some reason there is a frame around the picture when I set it as a in html.
I've tried to change the button to just and then the weird frame disappears but the the pressed down effect on to button doesn't work.
.img {
padding-left: auto;
align-items: center;
width: 200px;
height: 200px;
background: url("src/assets/red2.png")no-repeat;
}
.img:hover {
padding-left: auto;
align-items: center;
width: 200px;
height: 200px;
background: url("src/assets/red1.png") no-repeat;
}
.img:active {
background: url("src/assets/red1.png") no-repeat;
}
.img:focus {
background: url("src/assets/red1.png") no-repeat;
}
.img:target {
background: url("src/assets/red1.png") no-repeat;
}
<td>
<button type=button (click)="" class="img"></button>
</td>
Just add border:0; to get rid of the grey border and outline: none; if you want to get rid of the blue outline.
.img {
padding-left: auto;
align-items: center;
width: 200px;
height: 200px;
background: url("src/assets/redsmiley2.png")no-repeat;
border: 0;
outline: none;
}
.img:hover {
padding-left: auto;
align-items: center;
width: 200px;
height: 200px;
background: url("src/assets/redsmiley1.png") no-repeat;
}
.img:active {
background: url("src/assets/redsmiley1.png") no-repeat;
}
.img:focus {
background: url("src/assets/redsmiley1.png") no-repeat;
}
.img:target {
background: url("src/assets/redsmiley1.png") no-repeat;
}
<td>
<button type=button (click)="" class="img"></button>
</td>
Try adding
.img{
border:0;
}
Also make sure the
<td>
tag is in a table.
As GolezTrol stated, it's just the button default style to add a border.
What I use in these cases is simply
.img {
border: none;
outline: none;
}
This will ensure that the button has no border and also has no outline when active.
Related
I have the following code. Right now the overlay appears, but it's not on top of the image - it starts below the image. I want to make it that when I hover over the button, the info in the "wheel-display-overlay" class is visible and takes up the whole width and height of the button and is on top of the image.
button.wheel-display-button {
background-color: white;
background-size: cover;
border-color: black;
display: inline-block;
height: 400px;
padding: 0px;
width: 20%;
}
button.wheel-display-button:hover .wheel-display-base {
display: none;
}
button.wheel-display-button .wheel-display-overlay {
display: none;
}
button.wheel-display-button:hover .wheel-display-overlay {
background: black
color: white;
display: inline-block;
position: relative;
text-align: center;
width: 100%;
height: 100%;
}
<button class="wheel-display-button"
<img src="variant.image"/>
<span class="wheel-display-base">
<p>Brand</p>
</span>
<span class="wheel-display-overlay">
<p>Model</p>
<p>Size</p>
<span>
</button>
Hope it is what you are looking for:
button.wheel-display-button {
background-color: white;
background-size: cover;
border-color: black;
display: inline-block;
height: 400px;
padding: 0px;
width: 20%;
position:relative;
}
button.wheel-display-button:hover .wheel-display-base {
display: none;
}
button.wheel-display-button .wheel-display-overlay {
display: none;
}
button.wheel-display-button:hover .wheel-display-overlay {
background: black
color: white;
display: inline-block;
position: absolute;
text-align: center;
width: 100%;
height: 100%;
left:0;
top:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
<button class="wheel-display-button"
<img src="variant.image"/>
<span class="wheel-display-base">
<p>Brand</p>
</span>
<span class="wheel-display-overlay">
<p>Model</p>
<p>Size</p>
<span>
</button>
I'm trying to make an input field with a button and custom sprite image inside of it.
The input should change the border color and show the button with an
icon while hovering. Additionally while hovering both input and
button, the icon should be changed.
Right now the icon changes with input:focus while dismissing the border of the input.
If somebody can guide me in the right direction, it would be greatly appreciated.
Here's what I came up so far:
HTML
<form class="b-editor-item col-3">
<input type="text" placeholder="D" class="b-editor-d-input" />
<button type="button" class="b-editor-button-delete">
<div class="b-editor-icon-trash"></div>
</button>
</form>
SCSS
input[type="text"] {
border: 1px solid transparent;
}
.b-editor {
&-item {
display: flex;
align-items: center;
}
&-button-delete {
border: none;
height: 24px;
width: 24px;
overflow: hidden;
background-color: transparent;
}
&-d-input {
color: black;
background-color: #eaeaea;
border-radius: 6px;
width: 90%;
margin-right: -3.25rem;
height: 2rem;
}
&-icon-trash {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1044597/trash.png);
background-repeat: no-repeat;
background-position: -28px 0;
background-size: 300%;
height: 20px;
width: 20px;
padding: 5px 2px;
}
&-d-input:hover + &-button-delete:hover > &-icon-trash,
&-d-input:focus + &-button-delete:hover > &-icon-trash {
background-position: -52px 0;
}
&-d-input + &-button-delete {
display: none;
}
&-d-input:hover + &-button-delete,
&-d-input:focus + &-button-delete,
&-d-input:hover + &-button-delete:hover {
display: block;
}
&-d-input:hover,
&-d-input:hover + &-button-delete:hover {
border: 1px solid #00c8aa !important;
}
}
Try to add these 2 rules:
button.b-editor-button-delete:hover {
display: block;
}
button.b-editor-button-delete:hover .b-editor-icon-trash {
background-position: -52px 0;
}
I'm new to CSS etc.
I'm trying to align 2 buttons next to each other, in center of the background image, so it stays in position even when the window is being resized.
Image for illustration:
Code:
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
<div class="container">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
So, maybe you could try:
.container{
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
Or have you seen anything about flexbox? Since you want it to be responsive, I think it might be the best altenative.
.container {
display: flex;
align-items: center;
justify-content: space-around;
}
Why you creating two classes with same properties? first you can remove properties from classes: button1 and button2 and then add these properties to button class like this:
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
/* properties from class button1 or button2 */
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
And in button1 and button2 class add codes below to center these:
.button1 {
transform: translate(-50%, -50%);
position: absolute;
left: 40%;
top: 50%;
}
.button2 {
transform: translate(-50%, -50%);
position: absolute;
left: 60%;
top: 50%;
}
Don't change HTML code, classes are same.
Add this CSS code and change the top and left values as you need;
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
Edit HTML Code look like this;
<div class="btncenter">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
Below Final code sample you can view;
body {
background-image: url('/image/bgcopy.png'), url(/image/bg2.jpg);
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
background-size: contain, cover;
background-position: center;
}
.button {
width: 200px;
height: 70px;
margin: 20px;
text-align: center;
}
.container {
text-align: center;
margin: 0 auto;
}
.button1 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.button2 {
background-color: transparent;
color: white;
border: 2px solid red;
display: inline-block;
}
.btncenter{
top:50%;
left:40%;
position: absolute;
width:550px;
}
<div class="container">
<div class="btncenter">
<button class="button button1">Lang1</button>
<button class="button button2">Lang2</button>
</div>
</div>
I prefer to use #media queries per-width of the screen.
With position : absolute; and just play the top or left value as you need :D
There are multiple ways to do it. The code below will keep the buttons separated from each other until there is no space left. This should give you a start.
You can also use position: fixed if you need a more fixed solution. But I will recommend playing with flex property. It should solve most of the use-cases.
.btn-container {
display: flex;
align-items: center;
justify-content: space-around;
}
button {
background: pink;
color: #fff;
padding: 20px 40px;
}
<div class="btn-container"> <button class="first">Button 1</button><button class="second">Button 1</button></div>
I was trying to create a button using CSS. The html code looks like
<div class="content">
<img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ width="20" height="20">
<span class="fon">Google</span>
</div>
And CSS is
.content {
width: 120px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
}
.content img {
margin: 5px;
float: left;
}
.fon{
position:relative;top:5px;
}
I'm getting output as expected, but I wanted to reduce repetitive html code and move them to CSS, so that I just need to write code similar to below code and should show same output :
<span class="mybutton">Google</span>
Here is my JSFiddle
http://jsfiddle.net/WW4N6/678/
html
<p class="mybutton">Google</p>
css
.mybutton {
background: #2d3f51;
color: #f5f5f5;
display: flex;
align-items: center;
height: 30px;
width: 100px;
padding: 0 5px;
}
.mybutton:before {
content: '';
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png');
background-size: cover;
width: 20px;
height: 20px;
display: inline-block
}
JSFiddle: http://jsfiddle.net/WW4N6/681/
css
.mybutton {
width: 90px;
height: 30px;
overflow: hidden;
color: #f5f5f5;
background: #2d3f51;
background-image: url(http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png);
background-size: 20px, 20px;
background-repeat: no-repeat;
background-position: 5px;
padding-top: 10px;
padding-left: 30px;
}
jsFiddle link
http://jsfiddle.net/joshchurning/9sysby5f/
you could use css's background property for your button:
.mybutton {
....
background: url('http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png') no-repeat center center #2d3f51
....
}
If you want to get rid of the HTML code (the width and length of img, I'm assuming), you could just put the width and height in your .content img CSS class
.content img {
margin: 5px;
float: left;
width: 20px;
height: 20px;
}
Is there a possibility to change the buttons image to button_pressed.png while the button is pressed and change it back to button_unpressed.png when the button is released again?
EDIT
I have the following HTML:
<header id="toolbar">
<div id="toolbar_back">
<form action="#/">
<input type="image" />
</form>
</div>
<h1 id="toolbar_title">Photo Prints</h1>
</header>
And the following CSS:
#toolbar {
background: #FFFFFF;
height: 60px;
width: 100%;
margin: 0;
padding: 0;
box-shadow: 0px 2px 1px #888888;
display: table;
}
#toolbar_title {
color: black;
font-size: 30px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
#toolbar_back {
padding-left: 10px;
display: table-cell;
vertical-align: middle;
}
#toolbar_back input {
background: url("../img/toolbar/toolbar_back.png");
}
#toolbar_back input:active {
background: url("../img/toolbar/toolbar_back_pressed.png");
}
But with this the result is the following:
I just want the background images to be shown and i want them to be fully shown.
You'd want to make the button a background image:
#button input {
background-image: url("img/button_unpressed.png");
background-size: cover; /* or 'contain' */
background-repeat: no-repeat;
}
#button input:active,
#button input:focus {
background-image: url("img/button_pressed.png");
}
You'll probably also need to remove border and other styles to only show your background image.