So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?
Thanks!
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
}
#signUpBox:hover {
background-color: #ffffff;
}
h3 {
text-align: center;
margin-top: -35px;
letter-spacing: 1px;
font-size: 17px;
}
I'm not sure how you have the code set up but this would work on a div with an onclick function attached as a button:
#signUpBox {
width: 150px;
height: 47px;
border: solid 1px #000;
margin: auto;
margin-top: 25px;
border-radius: 2px;
color:#000;
background:#fff;
}
#signUpBox:hover {
background: #000;
color:#fff;
}
HTML:
<div id="signUpBox">This is a test</div>
DEMO
#signUpBox:hover {
background-color: #ffffff;
color:#000000;
}
you can do
#signUpBox:hover h3 {
color: #000;
}
JSFIDDLE
change text color using color property on hover.
#signUpBox:hover {
background-color: black;
color: white;
}
Here is a demo.
#signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
background: #000000;
color: #FFFFFF;
}
#signUpBox:hover {
background: #ffffff;
color: #000000;
cursor: pointer;
}
Fiddle
Related
How to add border bottom on hover effect as in this image
Add :hover for your button like this:
button {
width: 300px;
height: 60px;
border-radius: 10px;
background-color: #d94346;
border: none;
color: white;
font-weight: bold;
font-size: 1.3rem;
}
/* Add hover effect */
button:hover {
border-bottom: #bb262a 6px solid;
}
<button>Hover</button>
Is this result what you were expecting for ?
A box-shadowwould be more appropriate in my opinion.
EDIT: Comparing to the other answers I see, this way the button text won't move. 2 options.
button {
font-size: 30px;
padding: 30px 250px;
color: white;
background-color: #d84446;
border: none;
border-radius: 15px;
}
button:hover {
box-shadow: 0px 7px 0px #bb262a;
cursor: pointer;
}
<button>Hover</button>
you should do it in the other order
button:hover {
border-bottom: 4px solid #bb262a;
}
This question already has answers here:
I want to add a border to my button on hover event without moving the button or anything [duplicate]
(7 answers)
Closed 6 years ago.
My idea is to add a colored border to the submit button when the user hovers it.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
But the immediately following text then becomes shifted downwards.
How can I get rid of these "Jumping" text while simultaneously having the border?
You need to define transparent border by default on button and change border-color on hover. Further avoid changing font-weight property on hover as well as it will also expand the width and height of button and it will jump on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 6px solid transparent;
font-weight: 800;
border-radius: 4px;
padding: 5px 10px;
}
button:hover {
border-color: crimson;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Add "margin" attributes to your "button" CSS like so:
button {
border-radius: 4px;
padding: 5px 10px;
margin: 4px 0;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
margin: 0;
}
From Stop an element moving with padding on hover.
Just to give an alternative you could use outline to set the "border" on hover.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border: 0;
border-radius: 4px;
padding: 5px 10px;
margin: 5px 0;
}
button:hover {
outline: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Another option:
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
margin: 6px 0;
border-width: 2px;
border-style: outset;
border-color: buttonface;
}
button:hover {
border-width: 6px;
border-style: solid;
border-color: crimson;
font-weight: 800;
margin: 2px 0;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Here are some possibilities:
Style the button dimensions (padding/margin/border) with the same px/em values like it's :hover state
set the button position to absolute/fixed
Use a fix height in a parent div
check now
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
border: 6px solid transparent;
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Try adding height to button
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:40px
}
button:hover {
border: 6px solid crimson;
font-weight: 800;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
Add padding of the same size as the border to the button, and remove it on hover.
Mention the width and height to the button and remove the font-weight to avoiding a shifting of the element when hover the elements. Check below code.
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:50px;
width:100px;
}
button:hover {
/*font-weight: 800;
background-color: white;*/
border: 6px solid crimson;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
body div:first-child {
padding: 10px 20px;
background-color: #dedede;
margin-top: 50px;
margin-left: 300px;
width: 120px;
height: 80px;
border-radius: 8px;
}
button {
border-radius: 4px;
padding: 5px 10px;
height:50px;
width:100px;
}
button:hover {
border: 6px solid crimson;
background-color: white;
color: crimson;
}
<div class="container">
<button>SUBMIT</button>
<div>Please notice that ...</div>
</div>
I want to create something like the picture, where the #body is between #leg1 and #leg2, three of them should be horizontally in line to the bottom. Any idea how to achieve this? I tweaked some property such as display:inline, or float:left, float:right, but none of them work as I expect.
.comment_leg {
s width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
/*position:relative;*/
border: 1px solid orange;
/*height:60px;*/
width: 500px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
/*border-color:yellow;*/
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<br>
<br>
<br>
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
From what I understood of your "凸" shape I guess this is what you want:
NOTE: You can adjust height and width depending on your preference.
.comment_leg {
width: 60px;
/*height:18px;*/
background-color: #ffcc99;
padding: 5px;
text-align: center;
border-radius: 3px;
vertical-align: bottom;
display: inline-block;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
display: block;
For Firefox
}
#body {
background-color: white;
border: 1px solid orange;
min-height:100px;
width: 150px;
padding: 10px;
color: black;
border-radius: 3px;
font-size: 18px;
display: inline-block;
vertical-align: bottom;
}
#body:focus {
outline-style: solid;
outline-color: orange;
outline-width: 0px;
}
<div class="comment_leg">leg1</div>
<div id="body" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Pika pi?"></div>
<div class="comment_leg">leg2</div>
I have a textarea with border attributes :
#my_textarea{
border-color: #EEEEEE;
border-style: solid;
border-width: 2px;
width: 95%;
min-height: 550px;
padding: 30px;
margin-top: 28px;
/* Text style */
font-family: Times-Italic;
font-size: 19px;
color: #717171;
line-height: 27px;
text-align: left;
resize: none;
}
I want the text inside this textarea to have opacity. But when I set opacity: 0.5; it also affects the border.
How to set opacity only on text inside textarea and not text + border ?
Just use an RGBA text color
color: rgba(113,113,113,0.5);
body {
background: lightgreen;
}
#my_textarea {
border-color: #EEEEEE;
border-style: solid;
border-width: 2px;
width: 95%;
min-height: 100px;
padding: 30px;
margin-top: 28px;
/* Text style */
font-family: Times-Italic;
font-size: 19px;
color: rgba(113, 113, 113, 0.5);
line-height: 27px;
text-align: left;
resize: none;
}
<div id="my_textarea">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Using an RGBA value for your color should fix the problem you have.
Below is an example.
body {
background: red;
}
#my_textarea {
border-color: #EEEEEE;
border-style: solid;
border-width: 2px;
width: 95%;
min-height: 550px;
padding: 30px;
margin-top: 28px;
font-family: Times-Italic;
font-size: 19px;
line-height: 27px;
text-align: left;
resize: none;
color: rgba(113,113,113, 0.5);
background: transparent;
}
<textarea id="my_textarea">Lorum Ipsum</textarea>
Generator
Expanding what #Paulie_D said you should set opacity as rgba color for text:
#my_textarea{
rgba(113, 113, 113, 0.5); //instead of #717171
}
Also there is a nice hex-> rgba color converter
An alternative solution to complement the other answers, for IE8 (if required - as RGBA is not supported by it) would be to have a wrapper element around the textarea and use opacity instead of RGBA color:
body {
background: red;
}
.foo {
border-color: #EEEEEE;
border-style: solid;
border-width: 2px;
}
#my_textarea {
width: 95%;
min-height: 550px;
padding: 30px;
margin-top: 28px;
font-family: Times-Italic;
font-size: 19px;
line-height: 27px;
text-align: left;
resize: none;
background: transparent;
color: #717171;
opacity: 0.5;
}
<div class="foo">
<textarea id="my_textarea">Lorum Ipsum</textarea>
</div>
I wonder if i can put a submit button inside a search input, in the right side. I tried using float: right however doesn't work.
Codepen: http://codepen.io/celicoo/pen/XbKYyY
HTML:
<section class="search">
<div class="search__container">
<div class="search__row">
<div class="col-lg-12">
<div class="search__box">
<h2 class="search__title">Procurando por: Nome de ...</h2>
<form class="search__form" action="#" method="get">
<input class="search__input" type="text" placeholder="Busque um Crawler.." />
<button class="search__submit" type="submit">Procurar</button>
</form>
</div>
</div>
</div>
</div>
</section>
CSS:
.search {
color: #676a6c;
margin-top: 25px;
&__row {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
}
&__box {
background: #FFFFFF;
padding: 10px;
}
&__form {
margin-top: 10px;
}
&__input {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 12px;
width: 100%;
font-size: 14px;
outline: none;
}
&__input:focus {
border: 1px solid #E97228;
}
&__submit {
background-color: #E97228;
border-color: #E97228;
color: #FFFFFF;
border: 1px solid transparent;
outline: none;
}
}
I was trying to use float right like i said, but isn't work, the float will only push the submit button to the right, but not inside the input.
Your input for .search__input has a width of 100% so nothing can actually go beside it.
You need to make the width less than 100% and add float:left;
Example:
.search__input{width:50%; float:left;}
I assume you are trying to have the submit button 'inside' the input... or overlapping it.
You need to create a wrapping div around the input and submit with position: relative;, and then give the submit button a position: absolute; and a top and right value.
I added display: inline & have placed your search bar inside a container.
Try this css:
.search {
color: #676a6c;
margin-top: 25px;
&__row {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
}
&__box {
background: #FFFFFF;
padding: 10px;
}
&__form {
margin-top: 10px;
}
&__input {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 12px;
width: 50%;
font-size: 14px;
outline: none;
display: inline;
margin:0px;
}
&__input:focus {
border: 1px solid #E97228;
}
&__submit {
background-color: #E97228;
border-color: #E97228;
color: #FFFFFF;
border: 1px solid transparent;
outline: none;
padding: 12px;
margin:0px;
}
&__container {
width: 250px;
}
}