I am using Persian language and I have developed two ways to display my button in Bootstrap 3.3.6:
For the upper I have used this code:
<div class="row text-center">
<button type="button" id="submitFace" class="btn btn-primary"> <h4><font face="B Nazanin">
خواندن اطلاعات چهره
</font></h4></button>
</div>
And for the lower I have used this code:
//--------in the CSS-------
#font-face{
font-family: myFirstFont;
src: url("../myFonts/BNAZANIN.TTF");
}
.myButton{
font-family: myFirstFont;
font-size: large;
font-weight: bold;
}
//---------in the HTML-------
<div class="row text-center">
<button type="button" id="submitFace" class="btn btn-primary myButton">
خواندن اطلاعات چهره
</button>
</div>
However, as you see in the picture when I use CSS the result has not a good sharpening. I mean border of the text is not clear, if you look closely you see that the text of the button is slightly blurred.
I have found that even though we use a myButton class without any styles, and instead we set inline styles like the upper code, it still remains blurred!!!
Ensure text-shadow: none is set.
Please try this css
text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
I just encountered this issue.
This issue comes from not having a bold font available for the font you have embedded. You need to include the bold version of the font or the browser will try to render the bold version of the font badly.
It is because you have
overflow-x hidden
;) That's how I fixed it!
I found the solution by turning off in the chrome checkboxes the style panel at my element submit button and the styles aplied to the button too from other parent elements.
Related
I am seeing extra spacing added to buttons that use some ::first-letter styles. This appears to be browser-specific, because it is happening for me in Firefox (74 & 63) but not Chrome and Safari.
<style type="text/css">
.caps button::first-letter {
text-transform: uppercase;
}
</style>
<div>
<button>foo bar</button>
<br/>
<button>much longer button label text</button>
</div>
<div class="caps">
<button>foo bar</button>
<br/>
<button>much longer button label text</button>
</div>
text-transform and font-size add spacing, but color does not. I'm sure there are other styles that affect this as well.
And buttons with longer text content get proportionally more extra spacing. See jsfiddle for a couple examples.
Is this expected behavior? Is there a best practice to remove the added spacing? It looks like display: inline-flex does the trick, but I'm not sure that's the best route.
I don't know if this is possible, what I am looking for is a way to change a specific character font, for example, I want to make this button:
the text has "calibri" font in css, something like this:
input[type="button"]{
font-family: calibri;
}
And I need to use "icomoon" font for the last character, so my HTML should look like this:
<input type='button' value="Move to right <span class=icomoon>x</span>" />
But I think this is not possible, other ways could be using soms CSS pseudos like ::after or :first-letter, but I can not figure them out.
So, the question is: It is possible to change the last character of a HTML button using css?
You can use multiple font-family then consider using the code of the icon you want to use.
Here is an idea using font-awesome:
input[type="button"]{
font-family: calibri,'Font Awesome 5 Free';
font-size:20px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<input type='button' value="Move to right " >
Instead of inserting a span inside the value of an input, you can just use a button element,
<style>
.button {
font-family: "OriginalFont";
}
.icomoon {
font-family: "icomoon"!important;
}
</style>
<button class="button">
Move to Right <span class="icomoon">x</span>
</button>
I'm trying to incorporate font-awesome icons in my webpage, and it all works fine, until I change to my font of choice, Exo 2, and the icons show up as a bordered square. It works fine with other fonts, but for some reason this won't work.
I have included the font-awesome stylesheet, and the google fonts stylesheet.
If anyone could point me to what I'm doing wrong, would be appreciated!
This issue with font-awesome could be due to setting other font to the icon. Please see this fiddle
.parent1,
.parent1 > i{
font-family: 'Open Sans', sans-serif;
}
.parent2{
font-family: 'Open Sans', sans-serif;
}
<script src="https://use.fontawesome.com/a30dc5ca39.js"></script>
<div class="parent1">
<i class="fa fa-times"></i>This won't work
</div>
<div class="parent2">
<i class="fa fa-times"></i>This works
</div>
If you set the font to the child element i.e. the <i> element, then font-awesome won't be rendered as you expect.
In the second example I only set different font to the parent, but not the icon, and it works as expected
fontawesome is font icons and Exo 2 is font and not "font icons"
to work fontawesome u must apply
font-family: FontAwesome;
and if u change it to something else here i think "Exo 2"
font-family: Exo 2;
it wont work and will disply u square
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>
I am trying to differentiate a button so that clients can see that it is the button that is in focus by default when the page loads. The design calls for a simple border around the button. I have button and button1 defined in my css like so:
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366
}
.button1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366
border: #00ffff;
border-style: solid;
border-width: 2px;
}
The button that I am trying to focus loses the default formatting. How might I fix this so that it simply keeps its formatting, the only difference being a thicker border around the button? Also, is there a way to make the border simply wrap itself around the shape of the button instead of being a rectangular border?
Here is an image of what my buttons look like:
In this case, I am trying to focus the Jail Address button.
The html for the input buttons is like so:
<input type="reset" class="button" name="refresh" value="Refresh">
<input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'">
<input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'">
<input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'">
the border by default is going to be rectangle, though with some browsers (not all) you can use the "border-radius: 5px" to get rounded corners
http://www.css3.info/preview/rounded-border/
you could also just make images with the buttons you want and use them instead (png is preferred since it will keep transparency)
.button1 {
background-image:url('paper.gif');
background-repeat: no-repeat;
cursor: hand;
}
I use that often instead of just img src=, then you can add an "on mouseclick" with javascript.. just an option. also, the cursor can be changed so it actually looks like they're rolling over a button :)
It appears that setting a button border:x style can completely change the button rendering, at least in Safari and Firefox. Here's a little test file I just used to demonstrate the effect:
<html>
<head>
</head>
<body>
<form>
<input type="submit" value="no border"/>
<input type="submit" value="border:0" style="border:0;"/>
<input type="submit" value="border:2" style="border:2;"/>
<input type="submit" value="width:8rem" style="width:8rem;"/>
</form>
</body>
</html>
Rendered in Firefox on MacOS, it looks like this:
and in Safari:
So it appears that the behaviour depends on both the border value and the browser. Seems odd to me, but there you are. I think this explains the effect described in the original question.
The default stylings for UI elements like buttons are user-agent defined, AFAIK there isn't a border setting which will allow you to follow the contours of the button without using CSS3's border-radius. Perhaps you should use a different element for your buttons that do not have a pre-defined shape, or use border-radius if appropriate, or a background image for which has the shape that you want.