How would I make round buttons using HTML and CSS? I tried to use a background image, and make it a certain size, but that doesn't seem to work. Specifically, I would like to make a circular button, which on a click would launch a Javascript script.
With border-radius.
http://jsfiddle.net/12w83vtn/
button {
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #000;
}
You can do this quite simply with css3:
HTML -
<div id="button">
</div>
CSS -
#button {
width:100px;
height: 100px;
border-radius:100%;
background-color:red;
}
And use an onclicked event to make it a button.
Two ways:
1.) Create images with rounded corners and set the inbetween with css colors.
2.) Use css properties which are limited to some browsers (FF use a set, safari some others, not sure if chrome use yet another set).
Check this list
border-radius need not be a percentage. Try setting it in pixels instead.
Related
I need a button which looks like this:
Required Button Shape
However my Button's height and width are in percentage. The only way to do this as far as I could find was border-radius to be half of width (to be specified in pixels) and as my button's width is based on percentage of parent's dimensions i don't the exact value. Putting border-radius as 50% gives a terrible shape. Button with 50% border radius
I came with a JavaScript but it requires an event:
function BorderRadius()
{
var x=document.getElementsByClassName("LoginButton");
x[0].style.borderRadius = (x[0].offsetHeight/2).toString()+"px";
}
Is there any way to call this JavaScript function automatically or any other solution, using CSS or JavaScript preferably.
Though you'll need to test this in a few different browsers setting the border-radius to be greater than the button height will give you the rounded corners that you are looking for, at least it does in Firefox.
div {
position: relative;
height: 300px;
}
button {
width:33%;
height:10%;
border-radius: 999px;
}
<div>
<button>Hello</button>
</div>
An alternative might be using Viewport Units instead of percentages. This can be combined with calc() and px values to give you minimum sizes.
Viewport Units:
button {
width: calc(100px + 15vw);
height: calc(20px + 5vw);
border-radius: calc(10px + 2.5vw);
}
<button>Button</button>
Just set the border-radius to fixed value and add line-height with same number.
button {
border-radius: 20px;
line-height: 20px;
background: #ccc;
}
<button>Test button</button>
Sarcoma's answer seems the best solution so far.
There is another way too though.
I just added onload="BorderRadius()" to the body.
It called the function immediately and set the shape.
I was trying to see if there was a way to do something like changing the color of margins in CSS, without changing the DOM, but i am unsure as to how to figure it out. Margin itself takes only things like "auto|inherit|number (px|$|vs|vh)" so i did not know if it was a combination of a few things.
How would i accomplish such a thing?
My bet seems to be on actually doing DOM manipulation.
Is my goal achievable with CSS alone?
My reasoning is that i am doing some scaling for a visual demo, and want to add a black border, similar to that of IPads and other Tablets. The issues i noticed is that adding a border which scales everything a little more (not what i wanted).
The reason why i am tagging javascript is because there might be a trick within javascript, outside the scope of css that would resolve the issue (while not changing DOM around).
Is this possible? Had anyone ever tried this?
You can create colored borders without using any extra dom elements... You have a couple of different options -- probably more.
Using box shadow:
.foo {
width: 250px;
height: 250px;
background: green;
box-shadow: 0 0 0 10px black;
}
Using a linear gradient on a pseudo-element:
.bar {
margin-top: 50px;
width: 250px;
height: 250px;
background: orange;
}
.bar:before {
content: '';
position: absolute;
width: 250px;
height: 50px;
background: linear-gradient(90deg, #000, #000)
}
DEMO
Hopefully I'm not misunderstanding what you're after...
I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.
I am trying to create a little 3d raised "panel" or "box" on my site. I found a similar example on this page where they have this page with windows that are "raised" off the page with a title box. In this case, they are using an image for the whole box and just the text in the middle is actual text on the page.
I wanted to see if this can be replicated using CSS or I should really move over to photoshop for this sort of thing and do it all as images. (if i have to)
does anyone have any suggestions on if this can be replicated using pure html and css, javascript.
As a second question, if it has to be done using photoshop and images is there are any good place to get photoshop "templates" where you wouldn't have to put this together from scratch.
Here's something similar using CSS3 for the fancy parts:
http://jsfiddle.net/RrfJb/ (view in a WebKit browser such as Chrome)
It can be made to work in "all browsers".
For Firefox it's as easy as adding the -moz prefix versions.
For IE, use CSS3 PIE for the gradients and box shadow, and this tool to generate transform CSS.
.box {
width: 300px;
position: relative;
background: -webkit-linear-gradient(top, #888 0%,#fff 30%);
box-shadow: 3px 3px 5px #666;
padding: 12px
}
.box > h2 {
background: #ccc;
float: left;
padding: 8px 16px;
position: relative;
top: -18px;
left: -21px;
-webkit-transform: rotate(-2deg);
font: bold 18px sans-serif
}
.box > p {
clear: both
}
<div class="box">
<h2>Welcome to website!</h2>
<p>Lorem ipsum dolor sit amet..</p>
</div>
You can do a lot with CSS3 including rotation, gradients and different fonts. The downside is that none of it apart from font embedding works in IE without various complexities.
You can't really do irregular bitmaps graphics like the paper crumpling, so you'll need an image for that.
Right now, I'd say that unless all the data is coming from a CMS, then the best way is to use an image for this, and possibly embed a font for the name at the bottom.
The second best way would be to just use the paper image, and to use CSS3 for the rest. Take a look at http://css3please.com/ for a good place to see the various properties.
When using CSS3 you always have to be aware that people using old browsers may not be able to see what you intend. Using it progressively is the best way. Check out this article.
In this particular case CC3 can add a drop-shadow. So if your OK with people who're using older browsers not being able to see the box shadow, go with CSS3. Otherwise use an image.
I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly).
Is there a way I can invert (or otherwise highlight) a small section of an image JavaScript?
Instead of using image maps, you could try this CSS method:
Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.
CSS:
#image {
position: relative;
width: 400px;
height: 100px;
background-image: url(image_map.png);
}
#map-part {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: transparent;
}
#map-part:hover {
background-color: yellow; /* Yellow Highlight On Hover */
opacity: 0.2;
filter: alpha(opacity=20);
}
HTML:
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Note that this will only work for rectangular links.
Take a look at jQuery MapHilight.
I'm not sure it does exactly what you need, but you can achieve that with minor tweaking.
How about overlaying a semi-transparent <DIV> block over the clicked area to highlight it?
There are many way,
In a d fashion way, break down your images into many smaller pieces and using table to combine them. After that, by using javascript to replace thr "src" attribute for the highlight effect.
In another CSS way, use CSS to clip the alt. image on top of the original, and control which area should be visible.
It is better to have a single image for all rather then many small images to speed up and user will get it without delay by network.