Using Bootstrap 3 and trying to get a simple transparent button look like on getbootstrap website home page. using the following code is giving me the default bootstrap button look with the gradient in the background instead of the look I am going for. I cannot figure out what I am doing wrong. Here is the CSS:
.btn-outline{color:#540300;background-color:transparent;border-color:#540300;}
.btn-outline:hover,.btn-outline:focus,.btn-outline:active{color:#fff;background-color:#540300;border-color:#333;}
and my HTML:
Test Button
Revised JS Fiddle Revised fiddle
.btn {
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
font-family: Calibri;
color: #594080;
font-size: 20px;
background: #ffffff;
padding: 10px 20px 10px 20px;
border: solid #594080 1px;
text-decoration: none;
}
.btn:hover {
background: #594080;
text-decoration: none;
color: white;
}
Related
As I said, depending on what browser I'm using, the button varies for some reason.
Here's the code I'm using right now-
HTML-
<input type="button" id="submitButton" onclick="generateLink()" value="Go" />
CSS-
#submitButton {
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
cursor: pointer;
}
#submitButton:hover {
background-color: #6b5ebd;
}
#submitButton:active {
background-color: #554a97;
}
Whenever I look this up on the live server on my Windows PC (on both Firefox and Chrome), it looks the way I want it to. But when I deploy the test site on Firebase and check it out on my mobile phone (iPhone with Safari Browser), The text "Go" is gone and all I can see is a flat, text-less button.
I have also tried changing the <input> tag to a <button> tag, adding a display: block; and a bunch of other stuff but it doesnt seem to work.
Any idea why this could be happening?
Please and thanks.
Have you tried using anchor element ?
Go
a{
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
text-decoration:none;
}
a:hover {
background-color: #6b5ebd;
cursor:pointer;
}
a:active {
background-color: #554a97;
}
I have this button which doesn't highlight properly when I click on it, please see the image, and CSS file down below
CSS for the toggle button:
.mat-button-toggle {
box-sizing: border-box;
height: 33px;
width: 159px;
border: 1px solid #E1E1E1;
border-radius: 2px;
background-color: #FFFFFF;
}
.mat-button-toggle:hover {
border: 1px #000 solid !important;
background-color: #FFF !important;
border-radius: 5px !important;
}
CSS for the text
.ticket {
margin-top: 5px;;
height: 18px;
width: 122px;
color: #111111;
font-family: Arial;
font-size: 16px;
letter-spacing: 0;
line-height: 18px;
}
HTML
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" >
<mat-button-toggle routerLink="ticketView" value="ticketView">
<div class="ticket" id="p1">
{{'TicketOverView' | translate}}
</div>
</mat-button-toggle>
My guess is there is something else in your css html going on. I have recreated your css in codepen for you and couldn't reproduce your results.
I would double check your html markup.
Here is the codepen I produced
https://codepen.io/jmllr89/pen/KKdzLGw
Also you do not need !important on the :hover pseudo-class. CSS is smart enough to recognize what needs to be changed. So simply define your initial state in mat-button-toggle and then in mat-button-toggle:hover you create a second state, and css will make the necessary changes.
.mat-button-toggle {
height: 33px;
width: 159px;
border: 1px solid #E1E1E1;
border-radius: 2px;
background-color: #FFFFFF;
}
.mat-button-toggle:hover {
border-color: #000;
border-radius: 5px;
}
My CSS stylesheet loads almost all the contents but it is not loading my CSS for button. It's strange because all other things are working fine. I use opera. I have posted the CSS below which is not loading, also how I load the CSS.
<link rel="stylesheet" type="text/css" href="/style.css">
.button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
JS fiddle https://jsfiddle.net/hpsj2e0L/
It works fine in the fiddle but not in my site.
The problem with your code is that you are writing CSS inside your HTML file without wrapping it into a <style> tag. Like this:
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also, you don't need both selectors if you are applying the style to a <button> you can just use button.
.button is only necessary if you are going to apply it as a class like in <div class="button"></div>
Check other style files to button class. Try give the different class name or load your style file later than others.
make sure you put your css in style tag or in css file
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also check if you have .button class in your html or maybe its button tag
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>
Here is how it looks from my source files
And here is how it looks from where it is hosted
Obviously alot wrong with it but the one thing I'm most worried about is that border around the blue button.
Here's the HTML code for each button.
Blue Button
View The Line Up</button>
Grey Button
View The Line Up!</button>
and the CSS.
Blue Button
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
background: #358cb1;
padding: 10px 30px 10px 30px;
text-decoration: none;
float: left;
margin-top: 20px;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
Grey Button
.btn2 {
-webkit-border-radius: 31;
-moz-border-radius: 31;
border-radius: 31px;
font-family: Arial;
color: #000000;
font-size: 14px;
padding: 10px 30px 10px 30px;
border: solid #000000 1px;
text-decoration: none;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.btn2:hover {
background: #acb0b3;
text-decoration: none;
}
If you want a solid, single-colour border, then:
border-style: solid;
It looks like it's set to something like inset or outset which are meant to create a quasi-3D effect, Windows 98-style.
If you don't want any border at all, then:
border: 0;
I'm not sure what do you want exactly but why are you wrapping an <a> tag around a <button> ? try this as in this JS Fiddle
View The Line Up
View The Line Up!
border:none; will get rid of the border.
As an aside, having a button inside of a link sounds redundant. Why not style the link instead (and apply display:inline-block;)?
My button text