I have a CSS button for my site which used to be full with the text in the very middle of it, but now the text is at the bottom and the button is smaller. Other people have had access to my root folder to make amendments and i dont know what they've done.
.button
{
display: inline;
margin-top: 2em;
padding: 1em 2em 1em 2em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.90em;
color: #FFF;
}
.button:before
{
}
try: display: inline-block
That should sort it.
Add display: block; and text-align:center;
.button{
display: block;
text-align:center;
margin-top: 2em;
padding: 1em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 0.90em;
color: #FFF;
}
DEMO
You can try this :-
text-align: center;
display:table-cell;
vertical-align:middle;
Hope it will help you.
Related
How to center a button and make it smaller than shown in the image?
HTML:
Download CV
CSS-
.cv {
position: relative;
background: #080808;
display: inline-block;
color: #fff;
padding: 10px 30px;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-weight: 500;
text-align: center;
width: 100%;
margin-bottom: 30px;
}
Here you Go
.cv {
position: relative;
background: #080808;
display: inline-block;
color: #fff;
padding: 10px 30px;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-weight: 500;
text-align: center;
width: 30%;
margin-bottom: 30px;
}
div{
display: flex;
justify-content: center;
align-items: center;
}
<div>
Download CV
</div>
change the display property to flex and add a new property called justify-content with the value of center. This should work
.list li::after{
content:" ";
width:100%;
display: block;
position: absolute;
height: 2px;
background-color: green;
}
ul li a{
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
}
HTML
<ul>
<li>contact</li>
</ul>
When i get over mouse li tag, I want to have liner after it, but this liner should be the same width as his li. Also I don't know how to active ::after, after `:hover.
Use a simple gradient:
ul li a {
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
background-image:linear-gradient(green,green);
background-size:0% 2px;
background-position:bottom left;
background-repeat:no-repeat;
transition:1s all;
}
a:hover {
background-size:100% 2px;
}
<ul>
<li>contact</li>
</ul>
What I would recommend is to make use of border-bottom on the <a> element. You can control how far away this underline is from the text with padding-bottom.
This avoids the need for ::after completely, and can be seen in the following:
body {
background: black;
}
ul li a {
display: inline-block;
/*padding: 10px 20px;*/
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
padding-bottom: 10px;
border-bottom: 1px solid green;
}
<ul>
<li>contact</li>
</ul>
Note that the width of the line (the border) is controlled by the amount of horizontal padding on the element. I've commented this padding out in the above example to show the line at the exact same width as the link.
I have a span like this:
<span class="indicator"></span>
Inside this span sometimes I have numbers like this:
<span class="indicator">
<span>10</span>
</span>
And, sometimes some Kendo-UI icons, like this:
<span class="indicator">
<span class="k-font-icon k-i-checkmark"></span>
</span>
And, here is my css:
span.indicator {
position: relative;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: 0.85em;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
.k-font-icon {
font-family: KendoUIGlyphs;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
font-size: 1.3em;
line-height: 1;
opacity: 1;
text-indent: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: none;
font-size: 16px;
}
There are two problems:
I want the two span indicators to have the same heights. The height of
the one with icon is one pixel more than the other one.
The icon in the span with icon is not vertically aligned.
UPDATE:
I realized if I change the font-size of .k-font-icon to 1em, both issues will be resolved, but the icon will be too small.
UPDATE 2:
Here's a Kendo UI Dojo.
.k-font-icon {
vertical-align: middle;
}
Simplest way, hope this help.
if you're setting the height and with of your .indicator, there are a few ways you could do this, but the easiest is probably to change the display to flex instead of inline-box and add a couple of properties (I haven't added the vendor prefixes, mostly because I'm lazy…):
.indicator {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: .85em;
font-weight: 400;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
height: 20px;
border-radius: 4px;
}
Unrelated side note: unless you have an .indicator class that behaves different ways depending on what HTML element it's on (and if that's the case, you should probably refactor that) you shouldn't add a span at the beginning of you CSS rule. It increases the specificity for no reason and makes your CSS less flexible/future proof.
Try using line-height and vertical-align css:
span.indicator {
position: relative;
border: 1px solid #8a8a8a;
background: #8a8a8a;
color: #ffffff;
font-size: .85em;
font-weight: 400;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
height: 20px;
line-height: 20px;
vertical-align: middle;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
span.indicator .k-font-icon {
line-height: 20px !important;
}
DEMO
Updated
what about this?
span.indicator {
background: #8a8a8a;
color: #ffffff;
font-size: 1.35em;
font-family: helvetica;
padding: 2px;
margin: 2px;
width: 30px;
overflow: visible;
text-decoration: none;
text-align: center;
display: inline-block;
border-radius: 4px;
}
.k-font-icon {
font-family: KendoUIGlyphs;
font-style: normal;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
we have a button, its displaying like this :
we want to display like :
.saveall
{
text-transform: capitalize;
font-weight: bold;
float: left;
text-align: center;
color: #fff;
background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab,Arial,Helvetica,sans-serif;
overflow: visible;
width: auto;
cursor: pointer;
vertical-align: middle;
display: inline-table;
padding: 9px;
position: relative;
margin-left: 6px;
margin-right: 6px;
}
<button class="saveall" title="Save all'" type="button" style="float: left;padding: 5px 5px 5px 0;" onclick="changeaction()" id="mass_update_butn">
<span><span>Invoice</span></span>
</button>
Please help me to find solution
thanks in advance
Seems simple enough.
Remove the inline styling and the border, then tweak the padding.
Those inner spand aren't really necessary unless you have a particular reason for having them.
.saveall {
text-transform: capitalize;
font-weight: bold;
text-align: center;
color: #fff;
background: #3fbdf7;
font: 500 14px/1.35 Roboto Slab, Arial, Helvetica, sans-serif;
cursor: pointer;
vertical-align: middle;
display: inline-block;
padding: 6px 24px;
position: relative;
border: none;
}
<button class="saveall" title="Save all'" type="button" onclick="changeaction()" id="mass_update_butn">
Invoice
</button>
Try this
button {
border: none;
background: #3FBDF7;
color: white;
font-size: 13px;
font-weight: bold;
padding: 5px 25px;
}
<button>Invoice</button>
So I have a button, but here's the issue. On Firefox only does it not completely fill up. As seen here
This is what it should look like
I'm not really sure what to do. Here's the CSS
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
}
And a demo http://jsfiddle.net/h7PXe/
Reason why it showing up is that you use line-height bigger than height of element.
Here you can see how box model is woking and were are outlines:
http://i.stack.imgur.com/Q6J6n.png
You can achieve the same look without using basic properties (then it will work in every browser)
.button-panel .button {
display: inline-block;
padding: 7px 0 5px;
border: 3px solid #6699FF;
width: 100%;
font-family: 'Avenir Next';
font-size: 27px;
font-weight: 300;
letter-spacing: 0.05em;
text-align: center;
background-color: #6699FF;
cursor: pointer;
}
http://jsfiddle.net/h7PXe/1/
Do height: 100%. You need to do this or else the browser won't know what to set the height to.
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
height: 100%
}
And a demo.