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.
Related
That's my first try:
.pricingTable-firstTable_table__getstart {
color: white;
background-color: #71ce73;
margin-top: 30px;
border-radius: 5px;
cursor: pointer;
padding: 15px;
box-shadow: 0px 3px 0px 0px #66ac64;
letter-spacing: 0.07em;
transition: all 0.4s ease;
}
<div class="pricingTable-firstTable_table__getstart" href="https://website.com">JOIN</div>
It doesn't click, and doesn't change anything, I appreciate the help
The usual way to achieve this is wrapping your div inside an a tag:
<a href="https://website.com">
<div class="pricingTable-firstTable_table__getstart">JOIN</div>
</a>
You could also solve this (less elegantly imo) using an onclick event in JavaScript:
<div class="pricingTable-firstTable_table__getstart" onclick="window.location.href='https://website.com';">JOIN</div>
If you want an anchor link to look like a button. Style it something like this:
Css
.link-button {
padding: 5px 10px 5px 10px;
border: 1px solid blue;
background-color: lightblue;
}
.link-button:hover {
background-color: blue;
cursor: pointer;
}
And the markup
<a class="link-button">Anchor as button</a>
But I prefer to use buttons for operations, and show navigation as anchors. Because people recognize them for that.
I want to achieve something like below
How do I style the html and css?
Hello you can enclose the two input fields in a div then add margins inside. Here's a summary of what I did;
put input fields inside a div
remove borders from the input fields
add margin on top & bottom of the input fields (this would be the spacing on top and bottom of the separator)
add a border on the right of the first input field
Do run the snippet below, thanks.
$(".input-group-wrapper input").on("focus", function() {
$(this).parent().addClass("focus");
});
$(".input-group-wrapper input").on("focusout", function() {
$(this).parent().removeClass("focus");
});
.input-group-wrapper {
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.1);
display: inline-block;
transition: 0.2s;
width: 100%;
}
.input-group-wrapper>.first,
.input-group-wrapper>.second {
border: none;
line-height: 30px;
display: inline;
margin: 6px 0px 6px 0px;
padding: 0px 8px 0px 8px;
}
.input-group-wrapper>.first {
width: 60%;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.input-group-wrapper>.second {
width: 30%;
}
.input-group-wrapper>.first:focus,
.input-group-wrapper>.first:active,
.input-group-wrapper>.second:focus,
.input-group-wrapper>.second:active {
outline: none;
}
.focus {
border: 2px solid rgba(0, 100, 200, 0.6);
}
<div class='input-group-wrapper'>
<input class='first' placeholder='e.g. Read every day p3 #goals #learning' />
<input class='second' value='Aug 4 2018' />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To achieve this look, you'll want to use a margin on one of them.
I have my code and a Code Pen linked below:
.modified{
height: 30px;
border-radius: 2px;
border: 1px solid lightgray;
box-shadow: none;
padding: 3px 6px;
}
.modified.right{
margin-left: -10px;
width: 125px;/* Alternatively use % or vw */
}
.modified.right::placeholder{
color: black;
}
<input type="text" class="modified" placeholder="Just Test Me"/>
<input type="text" class="modified right" placeholder="I Am Testing" />
Codepen Example
I hope this helps!
I´m trying to build a search element together with a button, something like:
Except that I need to change the background color of the search icon (blue, gray, whatever...).
Here is my code so far and the result:
.searchWrap {
position: absolute;
border: thin solid #f2f2f2;
border-radius: 5px;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
}
.searchButton {
right: -50px;
width: 30px;
height: 20px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 5px;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
}
<div className="searchWrap">
<input type="text" className="searchTerm" placeholder="Search..." />
<button type="submit" className="searchButton">
<Icon name='search' />
</button>
</div>
I'm using React. Here is my result so far:
The external border is rounded, ok, that's what I need, but the separation between the searchTerm and the searchButton is also rounded, and I need a plain separator here, something like:
I'm using font awesome here, so the code isn't spaced like your screenshot, but looks like you have your own library you're using with react for that icon and your spacing is fine.
All you need to do is use border-radius: 0 5px 5px 0 to keep the left side borders from rounding, and assign a border-left on the .searchButton to draw the vertical line. I changed the border color so it's more prominent, but you can use whatever color you want.
*{margin:0;padding:0;}
.searchWrap {
position: absolute;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
margin-left: 3px;
border: thin solid #ddd;
border-width: thin 0 thin thin;
border-radius: 5px 0 0 5px;
}
.searchButton {
right: -50px;
width: 30px;
height: 32px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 0 5px 5px 0;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
border: thin solid #ddd;
}
.searchTerm:focus, .searchTerm:focus + .searchButton {
border-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="searchWrap">
<input type="text" class="searchTerm" placeholder="Search..." />
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
Try this for the search button css instead of border-radius
.searchButton {
...
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
...
}
Can you use bootstrap? Relatively simple, and once you have it, modify the css the way you want it.
https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
Bootstrap is strongly recommended for this. See http://getbootstrap.com/components/#input-groups. Coupled with FontAwesome, you could do something like this:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="fa fa-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
I have a .button class which on the active state adds an inset box shadow and increases the line-height by 2 to give a button press effect. But the button adjacent to it and the text below it also move down which I do not want. Could you please tell me how can I achieve this effect without the anything else moving?
Note: I only want the text inside the button to move down by 2px on button press and hence I chose using the line-height.
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
Just add vertical-align: top; to your .button styles.
Default value of vertical-align property is base-line. When one button is focused, because of change in its line-height, alignment of .button elements gets disturbed and as a result it push down the below content.
.button{
display: inline-block;
vertical-align: top;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
I would suggest making the line height 38px and adding transparent box shadow (of the same height) when button is not active. This way in active state nothing will be moved.
You can try this with a transformation:
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
transform:translateY(2px);
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
I´m trying to do some buttons with image and text, and I already did this work.
But now I´m studying a diferente hypothesis, If I have a text bigger I´m trying to center the text in the button but I´m not having sucess put this right. I´m not having succeess putting my very big is not good align-center just below the 1st text.
Have you ever had a case like this? How we can solve this?
I have this Html for two buttons:
<button class='btn'>
<img class="big_btn" src="icon1.png" width="40" height="40"/>
Big button so big <span> very big is not good</span>
</button>
<button class='btn'>
<img src="icon1.png" width="40" height="40">
2button big
</button>
And I have this css file:
.btn {
position: relative;
width: 180px;
height: 60px;
margin-top:7%;
padding: 0 10px 0 10px;
line-height: 37px;
text-align: left;
text-indent: 10px;
font-family: 'bariol_regularregular';
font-size: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1f1f1; /* button background */
border: 0;
border-bottom: 2px solid #999; /* newsletter button shadow */
border-radius: 14px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #999;
box-shadow: inset 0 -2px #999;
}
.btn:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn img { float: left;}
.btn .big { margin-top:10px;}
.btn:hover { background-color: #f7f7f7;}
Here's the Fiddle: http://jsfiddle.net/3F9pu/
My image updated:
Your problem is your line-height attribute. If you set that to be 37px, each new line of text will be separated by 37px. Remove `line-height:37px and the text will wrap around the image.
line-height: 37px
I also removed your text-indent and replaced it with a margin on your floated image to make the text all align properly.
.btn img{
float:left;
margin-right: 10px;
}
text-indent: 10px
JSFiddle
Use a CSS background image.
Have a fiddle - Fiddle Link!
HTML
<button class='btn'>Big button so big very big is not good</button>
<button class='btn'>2button big</button>
CSS
.btn {
background: url("http://lorempixel.com/output/cats-q-c-40-40-3.jpg") #CCC 10px no-repeat;
border: none;
padding: 10px 10px 10px 60px;
width: 200px;
text-align: left;
vertical-align: top;
min-height: 60px;
cursor: pointer;
}
.btn:hover {
background-color: #F00;
}