Related
I have a search_icon acting as a button in my HTML and it is working, but I cannot figure out how to remove the black box around the icon. I have tried outline: none; and border: none;, but nothing seems to remove it.
Here is the html:
<button id="search-button" [disabled]="!(isOnline$ | async)"
(click)="onExpandFilter()"><mat-icon class="search-icon" svgIcon="search_icon"></mat-icon>
</button>
Here is the css:
.search-icon {
width: 40px;
height: 40px;
padding: 12px;
border-radius: 3px;
box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}
Any suggestions?
Remove the box-shadow property from the class .search-icon
.search-icon { width: 40px; height: 40px; padding: 12px; border-radius: 3px;}
It is likely that the border is on the outer button element, not the SVG/icon. Based on your example:
<button id="search-button" [disabled]="!(isOnline$ | async)"
(click)="onExpandFilter()"><mat-icon class="search-icon" svgIcon="search_icon"></mat-icon>
</button>
I would suggest adding CSS for the button like:
#search-button {
border: none;
}
or something similar.
I am trying to create a reusable div css class that I can use to highlight quotes in articles I am writing on my campaign website. When debugging in Visual Studio using Chrome (or Firefox) I get the desired result:
As you can see there is a silver border, but padding around it.
My CSS class is:
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: silver;
outline-width: 1px;
outline-offset: -10px;
text-align: center;
}
However, in Internet Explorer no padding on the border occurs. Seems like outline-offset is ignored.
Link to article on my website
How can I get a cross-browser class set up that will produce the desired result?
outline-offset is not supported in Internet Explorer.
You could use a combination of outline and border to achieve the same effect.
Here border is used for the silver line and outline is used for the white space surrounding the element.
body {
background: #fffacf;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: white;
outline-width: 10px;
text-align: center;
border: 1px solid silver;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
Another option is to use box-shadow instead of border or outline. This allows you to have as many "borders" as you like.
body {
background: #e6e6e6;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
text-align: center;
margin: 30px 0;
box-shadow: 0 0 0 1px silver,
0 0 0 10px white;
}
.crazy-border {
margin: 50px 10px;
box-shadow: 0 0 0 2px red,
0 0 0 4px white,
0 0 0 6px orange,
0 0 0 8px white,
0 0 0 10px gold,
0 0 0 12px white,
0 0 0 14px green,
0 0 0 16px white,
0 0 0 18px blue,
0 0 0 20px white,
0 0 0 22px purple;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
<div class="articleQuote crazy-border">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
Try nested divs.
HTML:
<div class="article-quote-outer">
<div class="article-quote-inner">
{text goes here}
</div>
</div>
CSS:
.article-quote-outer {
padding: 12px;
background-color: white;
}
.article-quote-inner {
border: 1px solid silver;
padding: 15px;
}
Example:
JSFIDDLE
If the desired result is no white space surrounding the silver border, delete the line:
outline-offset: -10px;
I am trying to get an inside shadow working on an input field in Chrome. Unfortunately, this doesn't really work out so far. You can view a jsfiddle over here: http://jsfiddle.net/XgsPT/2/
My CSS:
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
And this simple HTML:
<input type="text" width="30">
But no shadow appears... (Chrome 24)
Give border to input field and the box-shadow will finally work.
http://jsfiddle.net/Jx8xF/
input {
margin-top: 15px;
margin-left: 15px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inset 0 0 10px #aaa;
border: 1px solid #aaa;
}
The background color of the input is messing things up. Check out this updated fiddle, with this change to the CSS:
input {
/* ... rest as before ...*/
background-color: transparent;
}
Basically, WebKit doesn't allow us to add box-shadow to form controls with native appearance. We need to remove the nativa appearance.
input {
-webkit-appearance: none;
box-shadow: inset 0 0 10px #000000;
}
Also, some CSS properties such as border and background imply -webkit-appearance:none.
Rather than setting the background to transparent set it to white, or whatever colour you like, you just need to declare it and then it will work as it should
I have this button image:
I was wondering whether it would be possible to make a simple
some words
and style that link to appear as that button?
If it is possible, how do I do that?
Using CSS:
.button {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
line-height: 25px;
}
<a class="button">Add Problem</a>
http://jsfiddle.net/GCwQu/
Check Bootstrap's docs. A class .btn exists and works with the a tag, but you need to add a specific .btn-* class with the .btn class.
eg: <a class="btn btn-info"></a>
you can easily wrap a button with a link like so <button>my button </button>
Something like this would resemble a button:
a.LinkButton {
border-style: solid;
border-width : 1px 1px 1px 1px;
text-decoration : none;
padding : 4px;
border-color : #000000
}
See http://jsfiddle.net/r7v5c/1/ for an example.
Try this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Button Tags</h2>
Link Button
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
You can use the a href tag line from there.
Button Text
If you'd like to avoid hard-coding a specific design with css, but rather rely on the browser's default button, you can use the following css.
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
Notice that it probably won't work on IE.
None of other answers shows the code where the link button changes its appearance on hover.
This is what I've done to fix that:
HTML:
My button
CSS:
.link_button2 {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #1A4575;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
background: #3A68A1;
color: #fee1cc;
text-decoration: none;
padding: 8px 12px;
text-decoration: none;
font-size: larger;
}
a.link_button2:hover {
text-decoration: underline;
background: #4479BA;
border: solid 1px #20538D;
/* optional different shadow on hover
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
*/
}
JSFiddle:
https://jsfiddle.net/adamovic/ovu3k0cj/
You have got two options for consistency.
Use framework-specific tags, and use them throughout the website.
Use JavaScript to emulate a link on a button element, and then have the button consistent with browser's buttons look. Those css button-look hacks will never be accurate.
.
<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>
return false; is to prevent the default behavior of the button being clicked.
Use the background-image CSS property on the <a> tag
Set display:block and adjust width and height in CSS
This should do the trick.
Yes you can do that.
Here is an example:
a{
background:IMAGE-URL;
display:block;
height:IMAGE-HEIGHT;
width:IMAGE-WIDTH;
}
Of course you can modify the above example to your need. The important thing is to make it appear as a block (display:block) or an inline block (display:inline-block).
For basic HTML, you can just add an img tag with the src set to your image URL inside the HREF (A)
<img src="http://problemio.com/img/ui/add_problem.png" />
You can create a class for the anchor elements that you would like to display as buttons.
Eg:
Using an image :
.button {
display:block;
background: url('image');
width: same as image
height: same as image
}
or using a pure CSS approach:
.button {
background:#E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
}
Always remember to hide the text with something like:
text-indent: -9999em;
An excellent gallery of pure CSS buttons is here
and you can even use the css3 button generator
Plenty of styles and choices are here
good luck
Just take regular css button designs, and apply that CSS to a link (in exactly the same way as you would to a button).
Example:
Some words
<style type="text/css">
.stylish-button {
-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
color:#333;
background-color:#FA2;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
font-size:16px;
font-weight:700;
padding:4px 16px;
text-shadow:#FE6 0 1px 0
}
</style>
Like so many others, but with explanation in the css.
/* select all <a> elements with class "button" */
a.button {
/* use inline-block because it respects padding */
display: inline-block;
/* padding creates clickable area around text (top/bottom, left/right) */
padding: 1em 3em;
/* round corners */
border-radius: 5px;
/* remove underline */
text-decoration: none;
/* set colors */
color: white;
background-color: #4E9CAF;
}
<a class="button" href="#">Add a problem</a>
Tested with Chromium 40 and Firefox 36
<a href="url" style="text-decoration:none">
<input type="button" value="click me!"/>
</a>
for those having problems after adding active and focus
give a class or id name to your button and add this to css
for example
//html code
<button id="aboutus">ABOUT US</button>
//css code
#aboutus{background-color: white;border:none;outline-style: none;}
Try this code:
<code>
<a href="#" class="button" > HOME </a>
<style type="text/css">
.button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}
.button:hover { background-color: #0066FF; }
</style>
</code>
Watch this (It will explain how to do it) - https://youtu.be/euti4HAJJfk
A simple as that :
link
Just add "class="btn btn-success" & role=button
I've got a tabbed navigation bar where I'd like the open tab to have a shadow to set it apart from the other tabs. I'd also like the whole tab section to have a single shadow (see bottom horizontal line) going up, shading the bottom of all tabs except for the open one.
I'm going to use CSS3's box-shadow property to do it, but I can't figure out a way to shade only the parts I want.
Normally I'd cover up the bottom shadow of the open tab with the content area (higher z-index), but in this case the content area itself has a shadow so that would just wind up covering the tab.
Tab layout
_______ _______ _______
| | | | | |
____|_______|__| |__|_______|______
Shadow line.
Shadow would go up from the horizontal lines, and outward of the vertical lines.
_______
| |
_______________| |_________________
Here is a live example:
Any help out there, geniuses?
In your sample create a div inside #content with this style
#content_over_shadow {
padding: 1em;
position: relative; /* look at this */
background:#fff; /* a solid background (non transparent) */
}
and change #content style (remove paddings) and add shadow
#content {
font-size: 1.8em;
box-shadow: 0 0 8px 2px #888; /* line shadow */
}
add shadows to tabs:
#nav li a {
margin-left: 20px;
padding: .7em .5em .5em .5em;
font-size: 1.3em;
color: #FFF;
display: inline-block;
text-transform: uppercase;
position: relative;
box-shadow: 0 0 8px 2px #888; /* the shadow */
}
Cut it off with overflow.
div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}
<div><div>tab</div></div>
You can use multiple CSS shadows without any other divs to get desired effect, with the caveat of of no shadows around the corners.
div.shadow {
-webkit-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
-moz-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
height: 25px
}
<div style="height: 25px"><div class="shadow">tab</div></div>
Overall though its very unintrusive.
One more, rather creative, way of solving this problem is adding :after or :before pseudo element to one of the elements. In my case it looks like this:
#magik_megamenu>li:hover>a:after {
height: 5px;
width: 100%;
background: white;
content: '';
position: absolute;
bottom: -3px;
left: 0;
}
See the screenshot, made the pseudo element red to make it more visible.
Update:
clip-path is now (2020) supported in all major browsers.
Original Answer:
If you are willing to use experimental technology with only partial support, you could use the clip-path property.
This will produce the desired effect: a box shadow on the top, left and right sides with a clean cut-off on the bottom edge.
In your case you would use clip-path: inset(px px px px); where the pixel values are calculated from the edge in question (see below).
#container {
box-shadow: 0 0 8px 2px #888;
clip-path: inset(-8px -8px 0px -8px);
}
This will clip the div in question at:
8 pixels above the top (to include the shadow)
8 pixels outside of the right edge (to include the shadow)
0 pixels from the bottom (to hide the shadow)
8 pixels outside of the left edge (to include the shadow)
Note that no commas are required between pixel values.
The size of the div can be flexible.
Personally I like the solution found here best: http://css3pie.com/demos/tabs/
It allows you to have a zero state or a hover state with a background color that still has the shadow from the content below overlaying it. Not sure that's possible with the method above:
UPDATE:
Actually I was incorrect. You can make the accepted solution support the hover state shown above. Do this:
Instead of having the positive relative on the a, put it on the a.active class with a z-index that is higher than your #content div below (which has the shadow on it) but is lower than the z-index on your content_wrapper.
For example:
<nav class="ppMod_Header clearfix">
<h1 class="ppMod_PrimaryNavigation-Logo"><a class="ppStyle_Image_Logo" href="/">My company name</a></h1>
<ul class="ppList_PrimaryNavigation ppStyle_NoListStyle clearfix">
<li>Benefits</li>
<li><a class="ppStyle_Active" href="/features">Features</a></li>
<li>Contact</li>
<li>Company</li>
</ul>
</nav>
<div id="ppPage-Body">
<div id="ppPage-BodyWrap">
content goes here
</div>
</div>
then with your css:
#ppPage-Body
box-shadow: 0 0 12px rgba(0,0,0,.75)
position: relative /* IMPORTANT PART */
#ppPage-BodyWrap
background: #F4F4F4
position: relative /* IMPORTANT PART */
z-index: 4 /* IMPORTANT PART */
.ppList_PrimaryNavigation li a:hover
background: #656565
border-radius: 6px 6px 0 0
.ppList_PrimaryNavigation li a.ppStyle_Active
background: #f4f4f4
color: #222
border-radius: 6px 6px 0 0
box-shadow: 0 0 12px rgba(0,0,0,0.75)
position: relative /* IMPORTANT PART */
z-index: 3 /* IMPORTANT PART */
you can cover up shadow using multiple box shadows as well.
box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;
If you added two spans to hook onto then you could use two, something like:
box-shadow: -1px -1px 1px #000;
on one span and
box-shadow: 1px -1px 1px #000;
on another. Might work!
If the shadows overlap you could even use 3 shadows - one 1px to the left, one 1px to the right and one 1px up, or however thick you want them.
I did a sort of hack, not perfect, but it looks okay:
<ul class="tabs">
<li class="tab active"> Tab 1 </li>
<li class="tab"> Tab 2 </li>
<li class="tab"> Tab 3 </li>
</ul>
<div class="tab-content">Content of tab goes here</div>
SCSS
.tabs { list-style-type: none; display:flex;align-items: flex-end;
.tab {
margin: 0;
padding: 4px 12px;
border: 1px solid $vivosBorderGrey2;
background-color:$vivosBorderGrey2;
color: $vivosWhite;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-bottom: 0;
margin-right: 2px;
font-size: 14px;
outline: none;
cursor: pointer;
transition: 0.2s;
&.active {
padding-bottom: 10px;
background-color: #ffffff;
border-color: #eee;
color: $vivosMedGrey;
border-bottom-color: transparent;
box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.1);
}
&:hover {padding-bottom: 10px;
}
}
.tabContent {
border: 1px solid #eee;
padding:10px;
margin-top: -1px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);