I have a Bootstrap button, in which I overrode the styling in my stylesheet because I wanted to make the button dark, now the button has a hover effect from Bootstrap on it, how can I get rid of it? See the snippet below for the result:
.btn-dark {
min-width: 100px;
background-color: black;
color: white;
border-radius: 1px;
text-decoration: none;
opacity:1.0;
box-shadow:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="fab fa-telegram-plane"></i> SEND US A MESSAGE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.btn-dark{
min-width: 100px;
background-color: black;
color: white;
border-radius: 1px;
text-decoration: none;
}
.btn:hover {
color: #fff !important;
text-decoration: none;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="fab fa-telegram-plane"></i> SEND US A MESSAGE
</body>
</html>
fiddle:https://jsfiddle.net/1qmjw47o/
Try using the :hover selector and add more CSS to specify the exact transition designed.
.btn-dark:hover {
color: white;
}
You also need to override hover in the styling.
.btn-dark: hover {
//Your style
}
You can set the css on the element to pointer-events:none.
Look here.
Just use
.btn:hover {
}
and write the necesssary.
.btn-dark{
min-width: 100px;
background-color: black;
color: white;
border-radius: 1px;
text-decoration: none;
opacity:1.0;
box-shadow:none;
}
.btn-dark:hover {
color: #fff !important;
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="fab fa-telegram-plane"></i> SEND US A MESSAGE
The way i do it is to disable a hover find your button and then put the hover color the same as the button color..
.e-btn.e-flat, .e-css.e-btn.e-flat {
background-color: #EB780A;
border-color: #EB780A;
}
and to disable the hover color - add hover at the end.
.e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover {
background-color: #EB780A;
border-color: #EB780A;
}
A bit late but it can still help I guess!
In Bootstrap you can do this ro remove both hover and focus effects (just change the variables to match those of your Bootstrap vesrion):
.btn {
&:hover {
background-color: var(--bs-btn-bg);
color: var(--bs-btn-color);
}
&:focus {
background-color: var(--bs-btn-bg);
color: var(--bs-btn-color);
}
&.active {
&:hover {
background-color: var(--bs-btn-active-bg);
color: var(--bs-btn-active-color);
}
&:focus {
background-color: var(--bs-btn-active-bg);
color: var(--bs-btn-active-color);
}
}
}
Related
I recently created an Angular project with a red navigation bar at the top of the page.
At the start the nav bar was directly at the top of the page but later on I realised that there was a small white space created above it.
I then discovered that I could highlight a part of the space and thought that it was not a CSS issue but rather a space placed by mistake.
Photo of white space:
White Space Above Navbar
Photo of console when I inspect the highlighted area:
Console: Inspect White Space
I think that the issue might be caused by the "  ;" but I don't know how to find it in my HTML files.
Here is my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MediStockWeb</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
app.component.html:
<router-outlet></router-outlet>
app.component.scss:
.navbar {
background-color: #eb4848;
border: 1.5px solid black;
}
.nav-link {
color: black;
font-size: large;
margin-left: 3rem;
font-weight: 500;
font-size: x-large;
}
.navLogo {
padding: 5px;
}
table {
border: 2px solid #000;
th {
border: 2px solid #000;
background-color: #ec3c3c;
font-size: large;
font-weight: 550;
padding: 1rem;
text-align: center;
}
td {
border: 2px solid #000;
text-align: center;
padding: 10px;
}
}
input {
border: 1px solid #000;
}
select {
border: 1px solid #000;
}
.btn {
border: 0.25px solid #000;
}
label{
font-size: large;
}
.errorMessage {
color: red;
margin-top: 10px;
}
input.ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
border: 1px solid red;
}
.mat-icon {
margin: 5px;
&:hover{
cursor: pointer;
color: rgb(94, 92, 92)
}
}
.nav-item {
&:hover{
cursor: pointer;
}
}
.modal-title {
font-size: 20px;
}
.modal-body {
font-size: 18px;
}
Any assistance would be appreciated!
I believe it's something in the component being displayed in your route or one of the scripts you include. It's not really good practice to place <link> elements in your body even if they are one of the body-ok types.
If I had to guess, I would say that you are including a script for ej2 somewhere in your build. It probably thinks it has to add the stylesheet <link> elements and does it inappropriately.
Whenever I press the button it changes its radius and adds a white line under the box. The idea is that the button stays in the same shape that was before, the only difference should be the shadow dissapearing the way it already does.
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
cursor: pointer;
border-radius:none;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(1px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
Edit: The below solution causes accessibility problems for keyboard users who rely on a visual outline to know where on a page they are focused. Instead, consider adding onclick="this.blur(); to unfocus the button after clicking so that the outline doesn't appear after clicking but still appears when focusing on the button.
<button class="boton" href="#about" onclick="this.blur();>CLICK!</button>
Your problem appears to be fixed by adding outline: none; inline to the button. You have this specified in your CSS but it appears some browsers are overriding your specification.
<button class="boton" href="#about" style="outline: none;">CLICK!</button>
your problem is caused by bootstrap. add button:focus{outline:none!important}
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(10px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
background-color:black;
}
button:focus{
outline:none!important;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(dis.style.display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.
You're not returning a value because the style attribute does not contain any value in this instance. If for example we move the display: block to the element as a style attribute like style="display: block" then it would return the value as you expect. See example provided, but the behavior is expected.
Hope this helps, cheers!
PS - a div is a block element by default, no need to define it in the css unless you're overriding the default for whatever reason.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0];
console.log(dis);
alert(dis.style.display);
}
</script>
</head>
<body>
<div class="navbar" style="display: block">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
Looks like you want to get the CSS computedStyle. You can use getComputedStyle to return an object containing the values of all CSS properties of said element.
getComputedStyle(dis, "display").display
Will return the display rule set in your elements css. As Chris W explained in the prior answer if you use el.style.display, it is looking for the inline style rule for display.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(getComputedStyle(dis, "display").display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
https://codepen.io/rogercodes/pen/JJVXoV/
HTML:
CSS:
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
/* Add a hover effect if you want */
.fa:hover {
opacity: 0.7;
}
/* Set a specific color for each brand */
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
Above is the link which currently has both Font Awesome and Bootstaps added under settings.
Here is the w3schools link that shows the correct icons only using font-awesome and not bootstrap.
https://www.w3schools.com/howto/howto_css_social_media_buttons.asp
As #Spharah said, all you have to do is remove the width: 30px rule for the .fa selector:
https://codepen.io/prahladyeri/pen/WOWwMz
(Or alternatively, change it to something like 70px if you want to tackle the facebook icon being slightly narrower, due to its icon width. This way, both icons will be equal sized.)
I am getting this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
</style>
</head>
<body>
<h2>Style Social Media Buttons</h2>
<!-- Add font awesome icons -->
</body>
</html>
output-preview:
this same script if i run in codepen it is giving same problem
I'd like to make the headbar touch the jumbotron, but not sure how. And one more question. Should the headbar be called navbar or does it not make a difference?
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CherryPlaysRoblox1</title>
<link rel="stylesheet" type="text/css" href="basic.css">
<link href="https://fonts.googleapis.com/css?family=Happy+Monkey" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="headbar"> <p>CherryPlaysRoblox</p></div>
<div class="jumbotron">
<h1>Welcome!</h1>
<p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is that advertising???)</p>
</div>
<h2 id="Firsth2">About me</h2>
</body>
</html>
And my Css:
p {
color: black;
}
.jumbotron {
background-color: Sandybrown !important;
float: top;
}
.jumbotron, p + h1 {
color: black !important;
}
.headbar p {
color: black !important;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
}
.headbar {
margin-bottom: 30px;
background-color: hotpink !important;
}
#Firsth2 {
color: black;
}
body {
background-color: Peachpuff !important;
}
Remove margin-bottom: 30px; from .headbar and set margin:0 in .headbar p:
p {
color: black;
}
.jumbotron {
background-color: Sandybrown !important;
}
.jumbotron, p + h1 {
color: black !important;
}
.headbar p {
color: black !important;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
margin:0;
}
.headbar {
background-color: hotpink !important;
}
#Firsth2 {
color: black;
}
body {
background-color: Peachpuff !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="headbar"> <p>CherryPlaysRoblox</p></div>
<div class="jumbotron">
<h1>Welcome!</h1>
<p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is that advertising???)</p>
</div>
<h2 id="Firsth2">About me</h2>
</body>
You're using a p for your .headbar, which has margin-bottom. Either don't use a p or get rid of the margin-bottom.
HTML:
<div class="headbar">CherryPlaysRoblox</div>
See: https://jsfiddle.net/y1tytq8u/