I am new to CSS. I have the following style for a tag button. How to reduce the height of the button? I tried changing it but it didn't help.
My code:
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
line-height: 13px;
margin: 0;
height: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
Could anyone help me on this? Thanks.
Remove height completely and try adjusting line-height
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
margin: 0;
line-height: 5px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO
Reduce your height as well as padding and remove the line height.
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding:3px;
margin: 0;
height: 20px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO
You can adjust the line-height and height
CSS
.tag-btn {
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
z-index: 5;
position: relative;
padding: 10px;
line-height: 0px;
margin: 0;
height: 22px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #F08080;
border: none;
color: #fff;
box-shadow: none;
}
DEMO HERE
Reduce the padding and line-height to decrease the height
Also read about the box model in css to understand more
https://css-tricks.com/the-css-box-model/
your .tag-btn is an inline-element,your can change the padding or line-height to change the height of btn,if your want to change the height directly, you can change the element to inline-block
.tag-btn {
padding: 5px 10px; //your code is 10px
}
Decrease "padding" css property. Make it one pixel and try.
padding: 1px;
your .tag-btn is an inline-element
your can change the padding
your can change the line-height
you can change the element to inline-block, if your want to change the height directly
every way will work for you
You need to remove line-height and padding from your CSS. Thereafter, you can manipulate the height.
Related
I have a transition on my anchors and every time I refresh the page, it just resets to default state of the anchor, and then it goes to the state I pre-defined with CSS.
When I put the transition into :hover it doesn't do this, but then I won't get a transition when I stop hovering over it.
.button1 {
display: inline-block;
padding: 0.5em 3em;
border: 0.16em solid #DDDDDD;
border-radius: 50px;
margin: 0 0.3em;
box-sizing: border-box;
text-transform: uppercase;
font-weight: 400;
color: #DDDDDD;
text-align: center;
font-size: 40px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.button1:hover {
color: #FFB5B5;
border-color: #FFB5B5;
border-radius: 20px;
}
.buttons {
text-align: center;
}
<div class="buttons">
div
flex-box
</div>
I am brand new to coding.
I am trying to get text to appear when the user rolls over an image, like these images here: http://www.enthusiastic.co/
So far I have this:
#imagelist {
font-size: 0;
}
#imagelist a {
margin: 5px;
display: inline-block;
background: #000;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#imagelist img {
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
height: 300px;
o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#imagelist img:hover {
opacity: .2;
width: 400px;
height: 300px;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#imagelist span {
display: none;
font-size: 13px;
color: red;
}
#imagelist span:hover {
display: block;
}
<div id="imagelist">
<a href="https://google.com" target="_blank">
<img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
<span>View</span>
</a>
</div>
I know it has something to do with the span tag but I can't figure it out. Any help would be much appreciated. Thanks.
What you need is to set the :hover action to the a tag and also use absolute position for the span. Check this:
#imagelist {
font-size: 0;
}
#imagelist a {
margin: 5px;
display: inline-block;
background: #000;
-webkit-border-radius: 4px;
border-radius: 4px;
position:relative;
}
#imagelist img {
-webkit-border-radius: 3px;
border-radius: 3px;
width: 400px;
height: 300px;
o-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
#imagelist a:hover img{
opacity: .7;
width: 400px;
height: 300px;
-o-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#imagelist span {
display: none;
font-size: 23px;
color: red;
line-height:300px;
text-align:center;
position:absolute;
top:0;left:0;
width:100%;
}
#imagelist a:hover span{
display: block;
}
<div id="imagelist">
<a href="https://google.com" target="_blank">
<img src="http://static2.businessinsider.com/image/4d7533c849e2aec902170000/this-man-can-predict-the-future-our-exclusive-qa-with-christopher-ahlberg-ceo-of-recorded-future.jpg" width="400" height="300">
<span>View</span>
</a>
</div>
Here's an easy code on bootply:
http://www.bootply.com/90238
It uses bootstraps native features along with this tiny bit of JS
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
I have the following CSS / HTML code:
CSS:
#buttons a {
margin: 0 30px;
display: inline-block;
position: relative;
padding: 9px 3px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
#buttons a span{
background: #242424;
font-size: 1.7em;
color: #fffae6;
border: 1px solid #fff;
outline: 4px solid #242424;
position: relative;
width: 100%;
height: 100%;
padding: 5px 40px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
HTML:
<a class="restaurant_book_button" href="/book"><span>Book Online</span></a>
How it renders in Safari:
How it renders in Chrome:
Any ideas what could be causing this?
Try box-sizing with -webkit prefix in span because you are using padding while your span width is 100%.
I can never get my CSS transitions to work on mouse out/off hover. It works fine on hover but not the other way around.
.btn {
border: 1px solid #5a5350;
background: #FFF;
color: inherit !important;
padding: 3px 10px;
display: inline-block;
font-weight: bold;
text-transform: uppercase;
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.btn:hover {
color: #FFF !important;
background: #f79e43;
border: 1px solid #f79e43;
}
What's the problem with my code?
Thanks
have four items that just show a bg image until you hove and then it displays text, bg image is then set to none.
The first element is expanding beyond the height of the other three. I really just wanted them all to stay at 200x200px. All the images used for backgrounds are 200x200px.
Should the .p1top be positioned differently such as absolute?
.p1top {
height:200px;
margin-left:45px;
background-repeat: no-repeat;
background-image: url(protect.png);
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p1top :hover {
height:200px !important;
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top :hover {
width:200px;
background-image:none;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p2top {
background-repeat: no-repeat;
background-image: url(build.png);
float:left;
margin-left:-15px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
/*.p2top :hover {width:200px; background-color:#7D8093;line-height: 20px; color: #FFFFFF; }*/
.p3top {
background-repeat: no-repeat;
background-image: url(savebg.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p3top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
.p4top {
background-repeat: no-repeat;
background-image: url(help.png);
margin-left: -20px;
width:200px;
text-align:center;
background-color:transparent;
line-height: 0px;
color: transparent;
font-size: 16px;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.p4top :hover {
width:200px;
background-color:#7D8093;
line-height: 20px;
color: #FFFFFF;
}
You have defined the height only in .p1top but not in other divs, so you need to set that's div height also. Then you could define position such as absolute but for this you should wrap all of these div with a div positioned relatively. If you post a jsfiddle that would be very much sensible.