I'm looking to make a html button darken in colour when hovered over.
The code I'm using is below:
<div style="width: 200px; color: white; background-color: #bf8f42; opacity: 0.8; margin: auto; margin-top: 0px; padding: 20px;">Training</div>
you can give a class to your div element and add some styling in style tag in tag.
Here is full HTML code for the button with a bit darken on hover
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn-training
{
width: 200px;
color: white;
background-color: #bf8f42;
opacity: 0.8;
margin:0 auto;
padding: 20px;
text-align: center;
}
.btn-training:hover
{
background-color: #9f7f31;
}
</style>
</head>
<body>
<div class="btn-training">Training</div>
</body>
</html>
Try out this part of code:
<style>
div:hover{
background-color: #000000;
}
</style>
Try something like this,
div:hover{
background-color: #000000;
opacity:1;
}
This code might help you for changing colors while hovering
<!DOCTYPE html>
<html>
<head>
<style>
input:hover {
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" />
</body>
</html>
Explanation:
When the user hovers over the class (test) it triggers the css element .test:hover. :hover is a anchor pseudo-class. you can use these types of classes in various ways Shown Here.
.test:hover {
background: #000000;
}
<div class="test">text</div>
Try this solution:
.btn-test {
width: 200px;
color: white;
background-color: #bf8f42;
opacity: 0.8;
margin: auto;
margin-top: 0px;
padding: 20px;
}
.btn-test:hover {
background-color: #a26d19;
}
<div class="btn-test">Training</div>
Related
<!DOCTYPE html>
<html>
<head>
<title>replit </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=""dropin">
<button class="dropdownbutton">dropdown button</button>
<div class="dropdownmenu">
List
List
List
List
</div>
</div>
</body>
</html>
css code:
.dropdownbutton{
background-color: blue;
color:white;
padding:13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropin{
position:relative;
display:inline;
}
.dropdownmenu{
display: none;
position: absolute;
background-color: orangered;
min-width: 150px;
}
.dropdownmenu a{
color: black;
padding: 11px 15px;
display: block;
text-decoration:none ;
}
.dropdownmenu a:hover {
background-color: aliceblue;
}
.dropin:hover .dropdownmenu{
display: block;
}
.dropin:hover .dropdownbutton{
background-color: grey;
}
I checked every single words and tags that I followed the process in YouTube by free code camp but it still does not work. This is the link to that YouTube video. (https://youtu.be/nu_pCVPKzTk?t=11602)
You have a typo in the class name, here's the working demo: https://codepen.io/dreambold/pen/eYjZejd
So it should be <div class="dropin">
This question already has answers here:
Different Color Links on the Same HTML Page
(5 answers)
Closed last year.
I'm trying to apply CSS to this specific button, but it keeps cascading for all the buttons on the page. How do I make the style specific to this one button? I have no preference on what type of selector is used. Please help, I have 0.0 coding knowledge.
<html>
<head>
<style>
a:link,
a:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover,
a:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
Instead of doing this:
Buy Here
Use it as this:
<a id="buy_button" href="URL" target="_blank">Buy Here</a>
Then apply the CSS to that specific id like this:
#buy_button{
background-color: gray;}
This is a good example of a time where you can use an ID selector. You can do this by adding id="idValue" to your html element and target it with CSS using #idValue. Here's an example of how that'd look:
<html>
<head>
<style>
#customButton:link,
#customButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#customButton:hover,
#customButton:active {
background-color: gray;
}
</style>
</head>
<body>
Buy Here
</body>
</html>
As mentioned in the comments, you can use the id - but there are maybe better ways to handle it.
<html>
<head>
<style>
#myButton:link,
#myButton:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
#myButton:hover,
#myButton:active {
background-color: gray;
}
</style>
</head>
<body>
<a id="myButton" href="URL" target="_blank">Buy Here</a>
</body>
</html>
is this what you need?
a.btn:link,
a.btn:visited {
background-color: #A9A9A9;
color: white;
padding: 10px 130px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a.btn:hover,
a.btn:active {
background-color: gray;
}
Buy Here
<a class="btn" href="URL" target="_blank">Buy Here</a>
I am learning HTML and CSS and I was trying to create menu button with drop down list of another menu items showing on hover. It is working fine, but there is one thing, which is not correct in my opinion. And that is fact, that this drop down menu shows up for half second after every page reload/refresh. Can somebody pls help and check, what is wrong in code I was trying to use?
Thank you very much in advance. Below is my HTML and CSS code.
body{
background-color: tomato;
height: 100vh;
}
.wrapper{
width: 80%;
margin: 0 auto;
}
.logo{
float:left;
font-family: arial;
}
.logo h2{
color:#fff;s
}
.menu_button{
background-color: transparent;
color:#fff;
padding:15px;
font-size:15px;
cursor: pointer;
border: 1px solid #fff;
width: 100px;
}
.right_menu{
position:relative;
display: inline-block;
float: right;
}
.dropdown_menu{
visibility: hidden;
text-align: center;
position: absolute;
background-color: #f9f9f9;
width: 100px;
box-shadow: 0px 8px 16px 0 px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: .3s;
}
.dropdown_menu a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown_menu a:hover{
background-color: #000;
color:#fff;
transition: .3s;
}
.right_menu:hover .dropdown_menu{
visibility: visible;
opacity: 1;
transition: .4s;
}
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<title>Hello world!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="resetStyle.css">
</head>
<body>
<div class="wrapper">
<div class="logo">
<h2>LOGO</h2>
</div>
<div class="right_menu">
<button class="menu_button">Menu</button>
<div class="dropdown_menu">
Home
About us
Contacts
</div>
</div>
</div>
</body>
</html>
What you're seeing on that flicker is the time between which the browser has downloaded and rendered the HTML, and it has downloaded interpreted and applied the CSS.
Depending on the speed of their computer, a user may or may not see the same artifact you're describing.
When mouse hover over the button all of the buttons are moving
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 0 0 10px 10px;
transition: 0.2s;
}
.nav div:hover
{
padding-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
I've expected that only one button will move but it isn't.
I need to write few word here because stackoverflow doesn't let me post this.
Also sorry for my English if its bad.
The buttons are siblings and sensible to changes of each other. If any sibling changes padding-top or padding-bottom, it will affect the others. They have the same parent and to change one button padding-top would change the parent height, affecting all the children (buttons).
Instead, in the hover you can use transform, like this:
.nav div:hover {
transform: translateY(-25px);
}
Transform affects the element individually without changing anything around.
You can do it like this
body{
padding:0px;
margin:0px;
font-family: Lato,Arial,sans-serif;
font-weight: bold;
font-size: 30px;
background-color: black;
text-transform: uppercase;
}
.container{
width:900px;
height: 30cm;
margin:0 auto;
background-color: black;
}
.nav{
text-align: center;
}
.nav div
{
background-color: white;
display: inline-block;
border: solid;
margin-left: 5px;
margin-right: 5px;
padding: 25px 10px 10px;
border-radius: 0 0 10px 10px;
transform: translateY(-25px);
transition: 0.2s;
}
.nav div:hover
{
transform: translateY(-5px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="container nav">
<div>
Other info
</div>
<div>
main
</div>
<div>
my projects
</div>
</nav>
</body>
</html>
Here is my example code:
<!DOCTYPE html>
<html>
<head>
<title>«Bug»</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
input[type='number'] {
background: gray;
}
input[type='number']::-webkit-input-placeholder {
color: red;
}
input[type='number']::-moz-placeholder {
color: red;
}
input[type='number']:-ms-input-placeholder {
color: red;
}
input[type='number']::placeholder {
color: red;
}
</style>
</head>
<body style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;">
<input type="number" placeholder="buggy bug">
</body>
</html>
You can also check it here: http://g1un.ru/bug/bug.html
I also did a "pen" http://codepen.io/g1un/pen/GmzaEg but it sometimes works as it should, when via first link it's always buggy.
I'm trying to style input placeholder with type='number'. But in firefox (53.0.3) it has no effect.
Please, help.
In your codepen, turn on autoprefixer in the CSS cog.
input[type='number'] {
background: gray;
&::placeholder {
color: red;
}
}
Type this - and then look at the CSS output of the CSS pane with the V icon.
This will help you see the right prefixes.
input[type='number'] {
background: gray;
}
input[type='number']::-webkit-input-placeholder {
color: red;
}
input[type='number']::-moz-placeholder {
color: red;
}
input[type='number']:-ms-input-placeholder {
color: red;
}
input[type='number']::placeholder {
color: red;
}
Another note - in your example above, your <style> tag should be in the <head> -