How do I draw shapes within buttons? I am trying to draw a plus sign within a button.
.button{
background-color: #423C3B;
padding: 32px 32px;
border-radius: 8px;
}
This is the code I have for my button.
Thanks
For "drawing" simple, popular shapes,you can use fonts made for symbols, like font-awesome. Check this jsfiddle for an example:
https://jsfiddle.net/gc4z9o9n/
<button class="btn">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
If you only need the plus sign an icon font could be overkill, requiring extra files and requests. You could just could use + or + for your geometry.
button {
padding: 0.5rem 1rem;
color: whitesmoke;
font-size: 3rem;
background-color: #423C3B;
border-radius: 8px;
}
<button type="button">+</button>
Adjust padding, font-size etc. as needed.
If you really liked the style of an icon font then I suggest using something like IcoMoon App to select only the icons you need to keep the footprint nice an minimal.
Related
I'm trying to achieve effect shown on the second picture - namely the green icon. My current state is on the first picture (working on icon with heart symbol but that doesn't really matter).
Current state
Goal
Digging on problem I've decided to break it into parts:
Render base icon (with white color)
First circle around the icon (with desired color - red in this case)
Rectangle below the icon
Second circle around the icon (white again) - this should overpaint a part of rectange from point 3 to create the edges effect.
I've been able to complete first two points with my current code:
<i class=\"fas fa-heart fa-lg\"></i>
Where fa-heart is overriden like:
.fa-heart {
display: inline;
border-radius: 60px;
box-shadow: 0px 0px 2px #888;
background: #d44d32;
width: 18px !important;
height: 18px !important;
text-align: center;
line-height: 30px;
vertical-align: middle;
padding: 3px;
color: white !important;
}
Code is taken from my asp mvc app due to this first line of my code may look strange - I'm computing the icon state in view.
One possible solution I've found doing my research is to use stacked icons. I'd very much like to render entire effect using one icon - if possible.
You need to change your padding: padding: 5px; also, having !important in w/h is unadvised.
I am trying to make a start page of sorts, and I want it to look somewhat like this: https://imgur.com/zjzKyRD (poorly made, but the program I used was really bad(I miss mspaint))
I originally used buttons, which made it really easy to link and customise, but I had some issues with size, so I tried with a div, but I can't seem to make the whole div box a clickable link. If I am able to figure that out, I still need to place the boxes in specific places and I have no idea how.
The question: How can I make these boxes, place them in a grid like formation and have them link to different sites? Would it also be possible to make a function where I can hover over one of the "sites" and it would show me some information about it? (manually entered)
Please keep in mind I'm really new to this, so an explanation would be nice :P Thanks.
Edit: Didn't include any code, here it is:
CSS ("borrowed" from w3)
.button {
margin-left: 150px;
margin-top: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;}
.button1 {
background-color: #ffbf80;
color: black;
border: 2px solid #ffbf80;
min-width: 350px;
width: 350px;}
.button1:hover {
background-color: white;
color: #ffbf80;}
HTML:
Google
Thats just one of the buttons, but the others are basically the same, but with different links, margins and colours(colors?).
When using multiple boxes they appear below each other, not besides each other. I have messed around with a bunch of different margin settings, a few things I found online when browsing around but nothing seems to align them properly.
First of all I'd suggest that you use some grid framework, such as Bootstrap or Foundation. Nobody writes websites in plain HTML anymore.
Secondly, I think you can use the a-tag and change the css so that it's an inline-box. Especially if you're only going to use them as links and not do anything fancy (such as some dynamic animations). You should probably have a container class around those to represent a row. As follows:
<div class="container">
<a class="linkbox" href="link1"> Link 1 </a>
<a class="linkbox" href="link2"> Link 2 </a>
<a class="linkbox" href="link3"> Link 3 </a>
</div>
<div class="container">
<a class="linkbox" href="link4"> Link 4 </a>
<a class="linkbox" href="link5"> Link 5 </a>
<a class="linkbox" href="link6"> Link 6 </a>
</div>
Check out this fiddle with accompanied css https://jsfiddle.net/wwk4tyzw/2/
Just because it's probably going to be more relevant in the future i want to throw this in here: https://drafts.csswg.org/css-grid/
I have two font icons in the (Bootstrap) navbar, a menu icon and a search icon:
<div class="menu-icon">
<i class="fa fa-bars"></i>
</div>
<div class="navbar-brand">
Website
</div>
<div class="search-icon">
<i class="fa fa-search"></i>
</div>
CSS:
.menu-icon {
float: left;
}
.search-icon {
float: right;
}
.menu-icon, .search-icon {
font-size: 1.6em;
padding: .6em 1em;
cursor: pointer;
background: #f55;
}
This works well on one browser but not on others because they have their own different sizes of font, which can also be changed in their settings.
This difference of size across different browsers require different padding or font-size. Which is clearly visible if you set a background color for them.
How can I avoid this font difference?
I would use background-image icons instead of font icons, if possible, to avoid the font sizing issue.
if you have not already, try specifying the font-size of your body element in %, eg.:
body {
font-size: 100%;
}
The em size that you set, refer to this value, which might not be the same in every browser unless you specify it. If you do, your em values should be consistent in all browsers.
There is a nice article about this (as well as line heights) here: https://alistapart.com/article/howtosizetextincss
Does this solve your problem?
I've been trying to solve this issue for a few hours, and I've searched for a good solution without much luck. It's driving me bonkers, fiddling with the padding and line-height. Vertical aligning it isn't doing anything (it was suggested in another thread here).
Basically I'm trying to create a responsive nav menu that, when the icon is tapped or clicked, will push down the page when the menu is revealed. I'm using a mobile-first strategy without using a framework (the site is simple so I feel Bootstrap is overkill).
But the icon seems to have an extra 1px on top.
I'm using Chrome, and I've reproduced the issue for you guys to look at.
<i class="fa fa-bars"></i>
i {
width: 48px;
height: 48px;
margin-top: 24px;
box-sizing: border-box;
border: 2px solid #555;
border-radius: 50%;
}
.fa-bars {
color: #555;
font-size: 24px;
text-align: center;
line-height: 48px;
}
You can view the result: http://jsfiddle.net/thecornishninja/jK8rD/
See the icon is not vertically centered? It looks like it has an extra 1px or 2px on top, and it's there whether I use rem or px.
I was using the code from Fontastic, but for demo purposes I'm using the simpler CSS from Bootstrap. The problem exists with both methods.
It's probably something ridiculously simple and I may well end up kicking my own butt, but my brain's fried so I hope you can help.
You need to change the css for .fa-bars:before, that's the element that is mispositioned.
Try:
.fa-bars:before {
content: "\f0c9"; /*This is what the creator of font-awesome put in to show the lines character */
display:block;
margin-top:-1px;
}
Also, it seems the height of the lines altogether is odd, so it won't position correctly. I changed the size of the circle to 49px so that it'd be centered.
Forked jsfiddle.
<- I mean this dotted border (top-left corner is shown).
It supposed to be a button with link. It looks great, but when I click on it, browser draws a border around it. If I remove the <a> from code and click again, border won't be drawn
CSS:
#button{
padding: 0.5em;
margin: 0 auto;
border-radius: 3px;
background-color: #B3C833;
font-family: 'Consolas',monospace;
font-size: 3em;
display: inline-block;
}
HTML:
<a href="#">
<div id="button">
<span id="pref">http://</span><span id="addr">example.com</span>
</div>
</a>
You need to add this porperty:
a {
outline:none;
}
That border is there for accessibility, and shouldn't be removed. It allows people that are disabled and accessing your site via keyboard to see where the focus is.
Check out outlinenone.com
If you don't mind losing a portion of your traffic, you can remove it anyway with:
a {
outline:none;
}