Hey I wanna add a border to my button when this is hovered. Below my code:
button{
background-color: #e876f5;
font-size: 20px;
color: white;
border-radius: 3px;
}
button:focus{
outline: none;
}
button:hover{
background-color: white;
border: 2px solid #e876f5;
color: #e876f5;
cursor: pointer;
}
I thought that adding border: 2px solid #e876f5; would suffice but when I hover the button there is no border. What should I do?
Button first add the border and after us hover border like this.
button{
background-color: #e876f5;
font-size: 20px;
color: white;
border-radius: 3px;
border:2px solid #e876f5;/* add normal button css */
}
button{
background-color: #e876f5;
font-size: 20px;
color: white;
border-radius: 3px;
border:2px solid #e876f5;
}
button:focus{
outline: none;
}
button:hover{
background-color: white;
border: 2px solid #e876f5;
color: #e876f5;
cursor: pointer;
}
<button>Button</button>
Related
This question already has answers here:
Combining border-top,border-right,border-left,border-bottom in CSS
(4 answers)
Closed 3 years ago.
I'm trying to make button 2 look exactly like button 1 with a border-top property. But I'm getting grey lines on three sides on Button 2.
css:
.button {
background-color: black;
border-top: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
outline: none;
}
html:
Button1
<button class="button">Button2</button>
Reset border first(note that order is important):
border: none;
border-top: 2px solid red;
.button {
background-color: black;
border: none;
border-top: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
outline: none;
}
Button1
<button class="button">Button2</button>
.button {
background-color: black;
border-top: 2px solid red !important;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
outline: none;
}
Button1
<button class="button">Button2</button>
Add an id to button. Then include the following lines of code in your CSS file.
#btn2{
border-bottom: none;
border-left: none;
border-right: none;
}
<button class="button" id="btn2">Button2</button>
You can override default border properties of button with the following properties
border-bottom: none;
border-right: none;
border-left: none;
or you can also remove default border of button by border: none then write your desired border-property like border-top: 2px solid red.
Your border is still set for the other sides, try removing the other sides first then adding the border top. Or, alternatively just set the border-size: 2px 0 0 0; and border-color: red;.
.button {
background-color: black;
border: 0;
border-top: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
outline: none;
}
Button1
<button class="button">Button2</button>
Hope this helps,
i'm making a button and I want to achieve an insteresting effect that you can see here.
The problem is that when on hover I put to the text rgba(0,0,0,0.0); all the button turns white, even the text.
Here's my code so far:
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: rgba(0,0,0,0.0)
}
The reason is because your hover color: was set to transparent, so of course it will be white. Try something simpler like below:
.button {
color: blue;
background: white;
padding: 5px 10px;
border: 3px solid blue;
border-radius: 5px;
text-decoration: none;
transition: all 0.3s;
}
.button:hover {
color: white;
background: blue;
}
button
The problem is that, you have set the text color opacity to 0 so it is like your text is completely transparent. You can simply match it to your body's background color like I did below. No need to mention the opacity, it is 1 by default.
Fixed and working code snippet:
body{
background: #0E80C6;
}
.button{
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
background: transparent; /* background changed to transparent so it shows the body's background color */
}
.button:hover{
background: #fff;
color: #0E80C6; /* color matched to that of the background */
}
<button class="button">Button</button>
Your issue was you had the opacity of the text color set to 0%. The last letter in rgba means "alpha" or opacity.
body {
background-color: rgba(42, 148, 245, 1.00);
}
.button {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
padding-left: 40px;
padding-right: 40px;
cursor: pointer;
}
.button:hover {
background: #fff;
color: rgba(42, 148, 245, 1.00);/*Set this to whatever you have for the background color. the "1.00" is the opacity"*/
}
<input type="button" value="button" class="button">
RGBA(red, green, blue, alpha)
The problem is you had the opacity(alpha value) of text is 0
body{
background: blue
}
.button{
background: transparent;
height: 40px;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
font-size: 16px;
color: #fff;
line-height: 2.4em;
cursor: pointer;
}
.button:hover{
background: #fff;
color: blue
}
<button class="button">Button</button>
I am using AngularJS and I wonder if there are any features that can help me. I have the following button CSS:
button {
background-color: #button-background-color;
border: 1px solid #button-border;
background-color: #ccc;
border: 1px solid #999;
color: #button-color;
background: #e6e6e6;
background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
background-image: -o-linear-gradient(top,#fff,#d9d9d9);
background-image: -ms-linear-gradient(top,#fff,#d9d9d9);
background-image: linear-gradient(top,#fff,#d9d9d9);
border: 1px solid #ccc;
border-top-color: #ccc;
border-bottom-color: #a2a2a2;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
line-height: 18px;
line-height: 1.8rem;
font-size: 14px;
font-size: 1.4rem;
cursor: pointer;
color: #474747;
padding: 4px 10px 3px 10px;
font-family: arial,sans-serif;
vertical-align: middle;
}
This looks good but I would like to have an effect that appears when I hover over and click on a button without yet releasing the click.
Is there any way that I can catch this with angular and have the class changed for the period when I am holding down the button?
Please note that I am looking for a CSS only or a CSS/AngularJS solution. I am not using jQuery.
Thanks
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/cssref/sel_active.asp
button:hover button:active
button {
background-color: #button-background-color;
border: 1px solid #button-border;
background-color: #ccc;
border: 1px solid #999;
color: #button-color;
background: #e6e6e6;
background-image: -moz-linear-gradient(top,#fff,#d9d9d9);
background-image: -webkit-linear-gradient(top,#fff,#d9d9d9);
background-image: -o-linear-gradient(top,#fff,#d9d9d9);
background-image: -ms-linear-gradient(top,#fff,#d9d9d9);
background-image: linear-gradient(top,#fff,#d9d9d9);
border: 1px solid #ccc;
border-top-color: #ccc;
border-bottom-color: #a2a2a2;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255,255,255,1);
box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.2);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
line-height: 18px;
line-height: 1.8rem;
font-size: 14px;
font-size: 1.4rem;
cursor: pointer;
color: #474747;
padding: 4px 10px 3px 10px;
font-family: arial,sans-serif;
vertical-align: middle;
}
button:hover
{
background: red;
}
button:active
{
background: green;
}
<button>button</button>
you can put the following css:
button:active{
background-color: red;
}
for more information: http://www.w3schools.com/cssref/sel_active.asp
I have set some styles on a content-editable div the div is resizable but the style doesn't get change according to the size when the size is changed.
HTML:
<div contenteditable="true" id="input"></div>
CSS:
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
height:40px;
resize:both;
}
Give width in percentage, that will help it resize. Dont know if thats what u mean.
http://jsfiddle.net/8xRZv/
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 80%;
height:40px;
resize:both;
}
I have a menu where each link is a div box. This div box have a gray border-bottom, however, when the link is visited it turns black. I just can't figure why.
On the following image I've clicked the Rediger profil and Log af links.
JSFiddle: http://jsfiddle.net/LpGbT/
HTML
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
<div class="design_sidebar_menu_item">Besøgende</div>
<div class="design_sidebar_menu_item">Mine favoritter</div>
<div class="design_sidebar_menu_item">Rediger profil</div>
<div class="design_sidebar_menu_item">Log af</div>
</div>
CSS
a {
text-decoration: none;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
}
.design_sidebar_menu_item:hover {
color: white;
background-color: #a6242f;
}
You may define a copied version of your div selector with a :visited suffix in order to set new colours for visited objects.
Aldo div classes are prefixed with a dot (.) instead of a sharp (#) character. Just a reminder. :)
.design_sidebar_menu_item:visited {
border-color: <your_color>;
}
If it doesn't harm your design etc. I would suggest this:
HTML:
<div id="design_sidebar">
<div id="design_sidebar_head">
Patrick Reck
</div>
Patrick Reck
Besøgende
Mine favoritter
Rediger profil
Log af
</div>
CSS:
div#design_sidebar a {
text-decoration: none;
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #d6d6d6;
display: block;
}
div#design_sidebar a:hover {
color: white;
background-color: #a6242f;
}
#design_sidebar {
width: 200px;
float: left;
border: 1px solid #d6d6d6;
-moz-border-radius: 2px;
border-radius: 2px;
background-color: white;
}
#design_sidebar_head {
width: 165px;
height: 30px;
font-family: Segoe;
font-size: 14px;
font-weight: bold;
color: #333333;
padding-top: 10px;
padding-left: 35px;
border-bottom: 1px solid #d6d6d6;
background-image: url('../img/icons/user.png');
background-repeat: no-repeat;
background-position: 10px 11px;
background-color: #f7f7f7;
}
EDIT:
How about adding:
a {
text-decoration: none;
display: block;
border-bottom: 1px solid #d6d6d6;
}
And removing border-bottom: 1px solid #d6d6d6; from .design_sidebar_menu_item {...}
The others will need links around them for this to work.
It doesn't..
I changed border-bottom color to 'green'. Now you have a clear view.
Check jsFiddle : check it out
.design_sidebar_menu_item {
padding: 5px;
padding-left: 10px;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #00FF00;
}