Button Active focus shadow default problem - html

The top of the button seems to have a default shadow when clicked you can see in the Codepen example the gold border gets darker around the top rim - how do I remove this behaviour?
Example
.button {
cursor:pointer;
height: 3rem;
width:10rem;
margin:15px;
font-size:2em;
font-family: Helvetica, Arial, Sans-Serif;
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 9%,rgba(102,102,102,1) 20%,rgba(71,71,71,1) 34%,rgba(71,71,71,1) 34%,rgba(44,44,44,1) 45%,rgba(0,0,0,1) 54%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
text-decoration:none;
border-radius:10rem;
border-color:#fcbd3f ;
border-width: 1.5px;
color:#d4d6d8 ;
box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
outline: none;
&:active{
outline: none;
box-shadow: inset 0px 7px 10px -10px;
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 16%,rgba(17,17,17,1) 51%,rgba(28,28,28,1) 70%,rgba(28,28,28,1) 70%,rgba(44,44,44,1) 82%,rgba(43,43,43,1) 82%,rgba(56,56,56,1) 82%,rgba(44,44,44,1) 82%,rgba(66,66,66,1) 84%,rgba(84,84,84,1) 91%,rgba(109,109,109,1) 92%,rgba(102,102,102,1) 98%,rgba(28,28,28,1) 100%,rgba(19,19,19,1) 100%);
}
&:hover{
color: white;
outline: none;
}
}
button:active{
outline: none;
box-shadow: inset 0px 7px 10px -10px;
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(0,0,0,1) 16%,rgba(17,17,17,1) 51%,rgba(28,28,28,1) 70%,rgba(28,28,28,1) 70%,rgba(44,44,44,1) 82%,rgba(43,43,43,1) 82%,rgba(56,56,56,1) 82%,rgba(44,44,44,1) 82%,rgba(66,66,66,1) 84%,rgba(84,84,84,1) 91%,rgba(109,109,109,1) 92%,rgba(102,102,102,1) 98%,rgba(28,28,28,1) 100%,rgba(19,19,19,1) 100%);
}


This code fixes your problem:
.button:active {
border-left-style: solid;
border-top-style: solid;
}
EDIT: or please check working codepen


The border you have on the button is the default border. Hou only adjusted the width and the color, not the style.
Therefore it's common practise to define a button like so:
border: 1.5px solid #fcbd3f;
Where solid is the style of the border.

Related

CSS split button with side drop down menu

I need a button with the following characteristics:
User clicks the left portion - "Edit" of the button and it takes
them to a form.
User clicks the right portion and it has a drop down
of a sub list menu.
I wrote the snippet below using two separate buttons which I took the approach from w3school and it looks like what I want except:
When I hover it, each button has its own hover behavior indepdently instead of doing it together.
When I reside my browser, this button breaks up into different rows.
How can I fix these deficiencies? or better yet if there is an out of the box button like this? I tried to google "button with side menu", "button side dropdown", button sub menu" ect.. but no luck so far.
.leftSideButton {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color:#64c1c9;
border-radius:5px 2px 2px 5px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 23px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
}
.leftSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
.leftSideButton:active {
position:relative;
top:1px;
}
.rightSideButton {
box-shadow:inset 0px 1px 3px 0px #91b8b3;
background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color:#64c1c9;
border-radius:2px 5px 5px 2px;
border:1px solid #566963;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:11px 13px;
text-decoration:none;
text-shadow:0px -1px 0px #2b665e;
margin-left: -4px;
}
.rightSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
.rightSideButton:active {
position:relative;
top:1px;
}
.splitButton{
display: block;
}
.btn-group leftSideButton:hover {
background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color:#6c7c7c;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="btn-group">
<button class="leftSideButton">Edit</button>
<button class="rightSideButton">
<i class="fa fa-caret-down"></i>
</button>
</div>
</body>
</html>

Move the hover to the parent div then apply the styles to both buttons.
.leftSideButton {
box-shadow: inset 0px 1px 3px 0px #91b8b3;
background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color: #64c1c9;
border-radius: 5px 2px 2px 5px;
border: 1px solid #566963;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 11px 23px;
text-decoration: none;
text-shadow: 0px -1px 0px #2b665e;
}
.leftSideButton:active {
position: relative;
top: 1px;
}
.rightSideButton {
box-shadow: inset 0px 1px 3px 0px #91b8b3;
background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color: #64c1c9;
border-radius: 2px 5px 5px 2px;
border: 1px solid #566963;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 11px 13px;
text-decoration: none;
text-shadow: 0px -1px 0px #2b665e;
margin-left: -4px;
}
.rightSideButton:hover {
background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color: #6c7c7c;
}
.rightSideButton:active {
position: relative;
top: 1px;
}
.splitButton {
display: block;
}
/* changes */
.btn-group {
/* Shrink the parent to fit the content */
display: inline-flex;
}
.btn-group:hover .rightSideButton,
.btn-group:hover .leftSideButton {
background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color: #6c7c7c;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="btn-group">
<button class="leftSideButton">Edit</button>
<button class="rightSideButton">
<i class="fa fa-caret-down"></i>
</button>
</div>

When I hover it, each button has its own hover behavior indepdently instead of doing it together.
Remove .btn-group leftSideButton:hover{...} from your css. You have already have this hover effect for each button declared previously.
When I reside my browser, this button breaks up into different rows.
Add .btn-group{ display: flex; flex-wrap: nowrap; } to your css.

CSS ISSUE with HTML

i have color issue with css. when i put HREF in link the font color changes to grey but there is no grey color in its class in css.
The code is below.
HTML
<a class="css_button_addHRS" >ADD HOURS</a>
When i add href in the tag it changes the font color of ADD HOURS to grey it should be white. Any Idea? There is no other grey A in css.
CSS
.css_button_addHRS {
font-size: 14px;
font-family: Arial;
font-weight: bold;
text-decoration: inherit;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
border: 1px solid #d02718;
padding: 9px 18px;
text-shadow: 1px 1px 0px #810E05;
-webkit-box-shadow: inset 1px 1px 0px 0px #f5978e;
-moz-box-shadow: inset 1px 1px 0px 0px #f5978e;
box-shadow: inset 1px 1px 0px 0px #f5978e;
cursor: pointer;
color: #ffffff;
display: inline-block;
background: -webkit-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: -moz-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: -ms-linear-gradient(90deg, #c62d1f 5%, #f24537 100%);
background: linear-gradient(180deg, #f24537 5%, #c62d1f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f24537",endColorstr="#c62d1f");
}
.css_button_addHRS:hover {
background: -webkit-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: -moz-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: -ms-linear-gradient(90deg, #f24537 5%, #c62d1f 100%);
background: linear-gradient(180deg, #c62d1f 5%, #f24537 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c62d1f",endColorstr="#f24537");
text-decoration: none;
color: #ffffff;
}
.css_button_addHRS:active {
position: relative;
top: 1px;
color: #ffffff;
}
this css creates a button rounded corner in red color with white font color. Help will be appreciated.

You have to specify This. The page links will automatically change to default color of links, so you have to add this:
<style type="text/css">
a:link,
a:visited,
a:hover,
a:active{
color: #FFF;
text-decoration: none;
}
</style>
What editor do you use to code?

It sounds like it's default styling of a :visited link.
You should add this to fix it:
.css_button_addHRS:visited {
color: #ffffff;
}

The link, visited and active colors, if not specified, take the defaults values set by the browser, and it varies across browsers. Since you already specified a color for .css_button_addHRS class, the grey color surely appears when you have visited the link,so you have to specify a color for visited links, e.g:
.css_button_addHRS:visited{
color: #ffffff;
}
Hope it's useful!

Input Text top and left border have a different border color

Heyy there,
I have this text field I would like it to have a simpler border, but the left and top borders have a different(darker) color than the one I'm assigning them to be. I have been trying alot of different attributes in my CSS file.
this is the image
this is my css:
div#search_area input[type=text]{
width: 179px;
height: 23px;
background: -webkit-gradient(linear, left top, left bottom, from (#ffffff), to (#f5f5f5));
background: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background: -o-linear-gradient(top, #ffffff, #f5f5f5);
outline: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-width: 1px;
border-color: rgb(228,229,228);
color: rgb(120,123,122);
font-size: 13px;
font-family: Arial, serif;
text-decoration: none;
vertical-align: middle;
padding: 0px 0px 0px 0px;
}

you need to also add
border-style: solid;
or dashed, or dotted, whichever one you want

This is because your border-style is most likely set to inset. If you change it to a different style, it won't create the "3D" effect that is causing the two different colors. See here for more details on border-style https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

box-shadow is not a gradient, how can I get a gradient shadow on my button?

I have just discovered that CSS box-shadow is not a gradient.
I want to have under my link element, which is shown as a button, is a gradient which goes from one RGB color to another RGB color, and this looks like a drop shadow. The top RGB color is #333 and the button RGB color to be #fff and it should have a height of 4 pixels. (just for example, I have not measured this from the button image).
So I have a
Button.
I want the shadow directly under it.
The button with a gradient shadow under it I am trying to reproduce is this one:
Is there any equivalent way to do this with box-shadow or is there any other way to do it?

Perhaps something like the following (although you're going to have to play a bit with the colours etc you prefer):
Button​​​​​​​​​​​
.btn {
border: solid 1px rgb(139,137,125);
border-color: rgb(182,179,161) rgb(167,164,146) rgb(139,137,125) rgb(167,164,146);
background: #C9C6B4; /* old browsers */
background: -moz-linear-gradient(top, #D8D5C1 3%, #C9C6B4 4%, #A7A492 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #D8D5C1), color-stop(4%, #C9C6B4), color-stop(100%, #A7A492)); /* webkit */ /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D8D5C1', endColorstr='#A7A492',GradientType=0 );*/
-moz-text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
-webkit-text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 3px;
cursor: pointer;
font: bold 12px/1em Arial, Helvetica, sans-serif;
color: rgb(255,255,255)!important;
text-align: center;
white-space: nowrap;
float: right;
margin: 0 0 8px 5px;
padding: 0.5em 1em;
}
.btn:hover {
border-color: rgb(211,106,13) rgb(185,72,0) rgb(166,53,0) rgb(185,72,0);
-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
-moz-text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
-webkit-text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
text-shadow: rgba(255,255,255,0.9) 0px 0px 10px;
box-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
background: #DD6C00; /* old browsers */
background: -moz-linear-gradient(top, #F69C11 3%, #DD6C00 4%, #BB4A00 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #F69C11), color-stop(4%, #DD6C00), color-stop(100%, #BB4A00));
}
Nick

Keeping inline text in place

I have been making a button which (hopefully) looks fairly realistic. One part of this is having the text move down 1px inside the button when it is pressed. I've done this by adding an additional pixel to the top and removing one from the bottom.
Unfortunately, I've designed my button to work inline (inline-block) and when the button is "pushed" it means any text on the line also gets pushed down. Now I think I know why (presumably due to the baseline of the text) but I wonder if anyone knows how I can get the same "pushed" effect whilst keeping surrounding text in place. I would like to avoid floats if possible.
Anyway on with the code:
http://gard.me/xsfqH
HTML:
<a class="button noIcon smaller" href="#">Buy Now</a> hello world
CSS:
a.button {
margin: 20px;
display: inline-block;
padding: 12px 12px 12px 12px;
background: none;
background-repeat: no-repeat;
background-position: 9px 5px;
background-position: 9px 5px, 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-width: 1px;
border-style: solid;
font-family: Verdana, Arial, Sans-Serif;
text-decoration: none;
}
a.button:active {
padding-top: 13px; padding-bottom: 11px;
-webkit-box-shadow: inset 0px 1px 6px -1px #000000;
-moz-box-shadow: inset 0px 1px 6px -1px #000000;
box-shadow: inset 0px 1px 6px -1px #000000;
}
a.button.noIcon {
color: #FFECEA;
background-position: 0 0;
background-color: #E46553;
background-image: -o-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466));
border-color: #A03E33;
}

since it's inline-block you can use vertical-align.
so all you have to do is
a.button:active {
padding-top: 13px;padding-top:11px;
-webkit-box-shadow: inset 0px 1px 6px -1px #000000;
-moz-box-shadow: inset 0px 1px 6px -1px #000000;
box-shadow: inset 0px 1px 6px -1px #000000;
vertical-align:1px;
}
and problem solved