The following code works fine everywhere apart from the iPad where the text inside the button is broken in two lines:
.sign_up {
background: url('../images/submit_button.png') no-repeat 0 0;
border: 0;
text-align: center;
color: white;
text-transform: uppercase;
font-size: 14px;
cursor: pointer;
margin-left: 12px;
width: 110px;
height: 34px;
}
the sign_up class has been given to the button element which contains "add others" as text.
However, on the iPad, "others" ends up being on the second line.
Reset the iPad button default style with -
button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
Add in css white-space:nowrap;
Related
My button text appears on one line in safari (even after initial click) however on google chrome my button will appear on one line when you first get to the button however when you go through more posts and come across the load more button again the text is messed up. This only happens on google chrome.
when you get to the load more button the first time..
when you get to the load more button the second time..
here is my css... i've tried adding in width, although it solves the issue the button is then not centered
.elm-wrapper {
margin: 1em auto;
text-align: center;
}
.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border: none;
padding-top: 45px;
padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 19px;
color: #848484;
outline: none;
}
.elm-button.ajax-inactive {
display: none;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-anim {
display: none;
}
.elm-button.is-loading .elm-loading-anim {
display: block;
}
.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button:not(.is-loading)::before {
content: "v";
font-size:11px;
float: right;
margin: 6px 0 0 16px;
font-family: 'Days One', sans-serif;
}
Would you like to try using:
.btn {
white-space: nowrap;
text-align: center;
}
While white-space: nowrap force the text in the button to never wrap, you can also make the button display as inline-block, so you don't have to give it a specific width.
You can just use non-breaking space ( ) between words in your html. It's rough but works in any browser.
Also better to set left and right paddings inside the button.
I have styled an oval button and it in an a element with the class .button
It works and looks great on firefox, but I get a rectangular button in Chrome, without a border. The link still works but the border and border-radius seems to be misunderstood.
This is the CSS:
a.orange-circle-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
Here is the HTML:
Current Stock
This is it in the wild: https://www.frontiercomputercorp.com/
I am assuming I've done something wrong with the border-radius that's unique to chrome, but I'm not skilled enough to know if it's being caused by the way I'm calling the class.
To recap: In firefox the button is oval (as I wanted)
In Chrome it is rectangular
HeLP!
Remove the following lines and it will be fixed:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
I tested it in Chrome and it fixed the problem.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.Therefore it overrides your border-radius code as Chrome natively doesn't set border-radius for the button. By not to adding appearance or setting it to none, you won't have this problem in Chrome too.
Just delete these lines below:
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
<a> is a clickable type of element. A hyper-link. display: block will do what you want here.
"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme."
(I think they are still ugly, but that's not the point here :) )
Here's the CSS now:
a.oval-box{
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
a.oval-box:hover {
color:#ffffff;
background-color: #f00667e;
text-decoration: none;
border-color: #f89520;}
I started this with a button so I got stuck thinking button. But as you have pointed out, it's just a styled block and I don't need the button comand at all.
Thanks.
I have applied two different styles for two different text buttons.
.BC {
background-color : DC143C;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
.DE {
background-color : black;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
The look and feel of the buttons are great in Mozilla,chrome,Opera and Safari browser with the expected colour changes(ie the button appers with default length and the text is wrapped inside it).But in IE8 and IE9 the color is applied only upto the text what I have mentioned and adjusts itself with the buttton structure.
Can you please help me with this?
Hey used to # before in color
as like this
background-color : #DC143C;
and replace this one
.BC{background-color : #DC143C;}
Is there a way to use css or jquery to create a simple border around focused form field. I would like something similar to Groupon's login page.
I checked the console in Chrome and they aren't doing anything special to the input on focus. They aren't changing the class or the inline style. Here's the user agent style for input for webkit-based browsers:
input, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
input, textarea, keygen, select, button, isindex, datagrid {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: -webkit-auto;
}
I hope this gives you an idea of how it works, but I think it's just general behavior of the browser.
I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
}
<button> your button that looks like a link</button>
If you don't mind using twitter bootstrap I suggest you simply use the link class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>
The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. It is especially tricky to get the styling of focused buttons right on Firefox (Mozilla).
The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all common browsers:
button {
align-items: normal;
background-color: rgba(0,0,0,0);
border-color: rgb(0, 0, 238);
border-style: none;
box-sizing: content-box;
color: rgb(0, 0, 238);
cursor: pointer;
display: inline;
font: inherit;
height: auto;
padding: 0;
perspective-origin: 0 0;
text-align: start;
text-decoration: underline;
transform-origin: 0 0;
width: auto;
-moz-appearance: none;
-webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */
-webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */
#supports (-moz-appearance:none) { /* Mozilla-only */
button::-moz-focus-inner { /* reset any predefined properties */
border: none;
padding: 0;
}
button:focus { /* add outline to focus pseudo-class */
outline-style: dotted;
outline-width: 1px;
}
}
The example above only modifies button elements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"] and input[type="reset"] elements as well. You could also use a class, if you want to make only certain buttons look like anchors.
See this JSFiddle for a live-demo.
Please also note that this applies the default anchor-styling to buttons (e.g. blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this after the CSS above.
The original code (see snippet) in this answer was completely different and incomplete.
/* Obsolete code! Please use the code of the updated answer. */
input[type="button"], input[type="button"]:focus, input[type="button"]:active,
button, button:focus, button:active {
/* Remove all decorations to look like normal text */
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
/* Additional styles to look like a link */
color: blue;
cursor: pointer;
text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
border: none;
padding: 0;
}
try using the css pseudoclass :focus
input[type="button"], input[type="button"]:focus {
/* your style goes here */
}
edit as for links and onclick events use (you shouldn’t use inline javascript eventhandlers, but for the sake of simplicity i will use them here):
watch and learn
with this.href you can even access the target of the link in your function. return false will just prevent browsers from following the link when clicked.
if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be dead when js is disabled use href="#"
You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.
You can achieve this using simple css as shown in below example
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
-moz-user-select: text;
/* override all your button styles here if there are any others */
}
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>
I think this is very easy to do with very few lines. here is my solution
.buttonToLink{
background: none;
border: none;
color: red
}
.buttonToLink:hover{
background: none;
text-decoration: underline;
}
<button class="buttonToLink">A simple link button</button>
button {
text-decoration: underline;
cursor: pointer;
}
<button onClick="javascript:window.location.href='link'">Domain</button>