This question already has answers here:
how to make a background-color on a div tag
(2 answers)
background color inside my <div> element using CSS
(4 answers)
Closed 2 years ago.
I found a button code so I used it. After that I saw that the button was completely transparent I learned how to colorize its text but not the background.
Can you assist?
The Code is:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
<div class="my_content_container">
Go to my link location
</div>
Use background property background-color to change the background color.
Example:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
background-color: red;
}
<div class="my_content_container">
Go to my link location
</div>
Add background-color property in your css rule:
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
background-color: #fbca8e; /* <- Here */
}
How do I colorize my button in JavaScript?
Use style.backgroundColor property.
document.querySelector(".my_content_container > a").style.backgroundColor = "red";
.my_content_container a {
border-bottom: 1px solid #777777;
border-left: 1px solid #000000;
border-right: 1px solid #333333;
border-top: 1px solid #000000;
color: #000000;
display: block;
height: 2.5em;
padding: 0 1em;
width: 5em;
text-decoration: none;
}
<div class="my_content_container">
Go to my link location
</div>
Related
I need to move the text inside a button horizontally on click to make a win95-ish click effect.
I've tried doing it with translate, but that moves the whole button, not just its contents. How do i move the text? I'd like to avoid creating elements inside buttons or messing with the padding.
body {
background-color: #008080;
}
button {
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
}
<button type="button">Click me!</button>
https://jsfiddle.net/qz0gt378/
You can use a text-shadow if you don't want to use other elements.
body {
background-color: #008080;
}
button {
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
text-shadow: 2px 2px 0px black;
color: transparent;
}
<button type="button">Click me!</button>
You can change the padding of your button.
body {
background-color: #008080;
}
button {
outline: none;
background-color: #C0C0C2;
color: #000;
padding: 5px 12px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
button:active {
border-top: 2px solid #000;
border-left: 2px solid #000;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
padding: 6px 11px 4px 13px;
}
<button type="button">Click me!</button>
below is the code, i had a one image, below that image there is Price and a button, i want some space between price and button which should be left and right to the image
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
.wrapper {
text-align: center;
}
.show{
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
float: right;
<div class="wrapper">
New Released
</div>
<img src="https://www.google.com.np/search?q=django+imagefield&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiHk57k89fcAhUJVH0KHbxAC08Q_AUICygC&biw=1396&bih=690#imgrc=3ukNSrarUo82hM:" style="width: 300px" height="200px">
<table>
<tr>
<td>
Price: Rs 14000
</td>
<td> Join Now</td>
</tr>
</table>
Use this approach it will work fine. Best part is you can even adjust its responsiveness with classes. Don't need to use table for such things. That's considered bad code.
You was missing closing bracket of .new class.
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
.image-container {
width: 300px;
height: 200px;
}
.image-container img {
width: 100%;
}
.image-container span {
float: left;
}
.show {
float: right;
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
<div class="wrapper">
New Released
</div>
<div class="image-container">
<img src="http://site8.dealerbase.co.nz/media/1707/300x200.gif" />
<br>
<span>Price: Rs 14000</span>
Join Now</div>
Thanks
.item-wrap{
display:inline-block;
border:1px solid #ccc;
}
.item-footer{
display:flex;
justify-content:space-around;
}
<div class="item-wrap">
<div class='item-img'>
<img src='https://picsum.photos/300/200?image=0'>
</div>
<div class='item-footer'>
<div class='price'><p>Price: Rs 14000</p></div>
<div class='item-join'>
<p>Join Now</p>
</div>
</div>
</div>
**HTML:**
<tr>
<td>
Price: Rs 14000
</td>
<td class="joinButtonAlign"> Join Now</td>
</tr>
**CSS**
.joinButtonAlign{
display: inline-block;
padding-left:30px;
}
Got a problem with aligning a div and an input next to each other to create that classic input with icon. However, when I use Safari/Mac and Safari/iOS, it appears like this:
Broken in Safari
... and I just can't get my head around it! It's fine on Chrome and I've tried playing around with the floats, vertical align (don't know how relevant this is), but still nothing.
HTML:
<div class="input-with-icon">
<div class="icon">X</div>
<div class="input"><input type="text" placeholder="Start typing to find a customer..."></div>
</div>
CSS:
.input-with-icon .icon {
float: left;
background-color: #fff;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
padding: 13px 0 14px 10px;
color: grey;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
.input-with-icon .input {
overflow: hidden;
}
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
}
Here's a fiddle if this helps you guys with my code - for some reason the right border doesn't want to work on the fiddle but not fussed about that bit as it's fine everywhere else.
https://jsfiddle.net/r08gxre3/1/
Any help would be much appreciated, thanks guys! :)
Just add margin: 0px; to your input element. It should be that!
Like:
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
margin: 0px;
/* or just margin-top: 0px; */
}
Fiddle: https://jsfiddle.net/bbdkzuyn/
I have the following, where I am creating a triangle (that looks like it has a border) with css.
I want to create another triangle, exactly the same, but about 50px to the right of the 1st one.
How would you do these 2 :before's :after's ???
JSfiddle Here
HTML
<div class="section-modules">
<div class="my-account">
<div class="section-module-light">
<h3>Register Here</h3>
<p>It’s quick and easy and you’ll be the first to know about new bits we release.</p>Register Now
</div>
</div>
</div>
CSS
.section-module-light:after,
.section-module-light:before {
content: '';
position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
position: relative;
margin-bottom: 2em;
padding: 1em;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: transparent;
color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
bottom: -0px;
left: 150px;
border-width: 36px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
bottom: -1px;
left: 150px;
border-width: 34px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}
JSfiddle Here
you do not need to create the triangle with separate stroke and fill, use css3 transform rotate. Then you can use before for one triangle and after for the second one.
display: block;
width: 34px;
height: 34px;
transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;
see the whole code here: http://jsfiddle.net/07jfLdwL/
You can use CSS3 transform rotate properties. See documentations.
Hi I want to make a menu button that should look like this when it is hovered:
But I made some thing that looks like this
You may notice the black border is not square as first image.
Here is my code (CSS):
#menu a:hover{
border-top: 5px solid #333333;
border-left: 5px solid #666666;
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
color: #FFF;
}
try this, this will work.
#menu a:hover{
border-top: 5px solid #333333;
background-color: #666666;
color: #FFF;
}
#menu a{
border-top: 5px solid #333333;
background-color: #666666;
color: #FFF;
}
It might look a bit goofy without any padding.. so this is what I'd recommend. Stack overflow's pound symbol got cut out from the CSS signature
#menu a {
border-top: 5px solid #333333;
border-left: 5px solid #666666;
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
padding: 5px 50px 5px 50px; /*<====================== added this*/
color: #FFF;
}
#menu a:hover {
border-top: 5px solid #333333;
border-left: 0px solid #666666; /*<========== changed this for hover effect*/
border-right: 5px solid #666666;
border-bottom: 5px solid #666666;
background-color: #666666;
padding: 5px 50px 5px 50px; /*<========================== added this*/
color: #FFF;
}
Tested in FF5 and IE8. Looks ok. The buttons are hyperlinks in white space.
But changes style on hover as you want.
#menu a:hover{
border-top: 5px solid #333;
background-color: #666;
padding: 0 5px 5px 5px;
color: #FFF;
}