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>
Related
I can't display text after the icon. I tried to use float but isn't working.
Can u help me to solve it please? I can't find the solve on google, i tried this before asking
CSS File:
*{
margin: 0;
padding: 0;
}
header{
height: 70px;
background-color: darkgrey;
width: 100%;
}
i{
margin-top: 15px;
margin-left: 15px;
padding: 0px 3px 0px 3px;
border-radius: 10px;
border-style: solid;
border-spacing: 10px;
}
i:hover{
background-color: grey;
}
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titlu</title>
<script src="https://kit.fontawesome.com/768cd38b76.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<i class="fas fa-bars fa-2x"></i>
<h1>Titlu</h1>
</header>
</body>
</html>
display: flex;
align-items: center;
Just add that to the class and it should solve your problem. You can also remove margin-top in the "i" class to make you design neater.
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.
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
hello i'm trying to make a nav bar using the position:sticky property but for some reason its not sticking i've searched the web for answers but couldnt find any fix so here I am
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}
/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}
/*img is not part of original code just there to show it dose not stick*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><b>What Is Port</b></li>
<li><b>Privacy</b></li>
<li><b>Get Started</b></li>
<li><b>Guides</b></li>
<li><b>Credits</b></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>
I have litterally no idea why it would not be working it might be me using it in the wrong place or something.
I'm planning to make it more responsive but that for another day so please excuse the bad UI on smaller windows.
you added position: sticky; to the <ul>. However sticky does not move the element out of the flow. Means the element will leave the viewport once the parent element leaves the viewport.
As such you have to add the sticky not to the <ul> but the containing <div>
sticky is supported by all browsers with exeption of IE (that will be deprecated starting at the 16th August 2021 and does not support sticky even with vendor-prefix)
/* css changes */
.navBar {
position: sticky;
top: 0;
}
/* original css */
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}
/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}
/*img is not part of original code just there to show it dose not stick*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><b>What Is Port</b></li>
<li><b>Privacy</b></li>
<li><b>Get Started</b></li>
<li><b>Guides</b></li>
<li><b>Credits</b></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>
I have a button with some styling but when i load the page, the transition on that button fires. So you see an ugly load from no padding to a button with padding.
This is how i load the css:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $pageTitle; ?></title>
<meta name="description" content="<?php echo $metaDescription; ?>">
<link rel="canonical" href="<?php echo $canonical; ?>" >
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<link rel="stylesheet" href="public/fontawesome5/all.min.css">
<!-- Bootstrap CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
The button html:
Contact us
The button scss:
.button {
position: relative;
text-decoration: none;
&.primary {
background-color: $black-color;
color: $white-color;
padding: 20px 40px;
font-weight: 300;
border-radius: $border-radius;
transition-duration: $transition-duration;
&::after {
#include pseudoElement($content: "\f054", $top: 50%, $right: 16px, $height: auto, $width: auto, $font-family: $font-awesome);
transform: translate(0, -42%);
opacity: 0;
}
&:hover {
padding: 20px 44px 20px 36px;
&::after {
right: 24px;
opacity: 1;
}
}
}
}
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);
}
}
}