Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
I am wondering how are you able to create a circle button using HTML and CSS. I feel like it has something to do with border-radius after you set a proper width and height but it didnt work out like I hoped. The image below shows what it should look like.
What the button should look like
For a circle shaped button all you need to do is set your border-radius to 50%. Change the background-color of the button to white and you should be good to go. You can also set your .button height, width, font-size and font-family to mimic your desired look.
<style>
.cont {
width:100%;
height:100%;
background-color:lightgrey
;
}
.button{
width:100px;
height:100px;
border-radius: 50%;
border:none;
background-color:lightgrey;
}
</style>
<div class="cont">
<button class="button">Explore</button>
</div>
if you want a generalized solution then you can try this
HTML
<button>Explore</button>
CSS
button {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
}
You can adjust the width & height according to your requirement
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I apply various effects, like increasing its size etc., using CSS to this arrow
https://jsfiddle.net/tnfLc58h/
So far I've been able to change its color.
HTML
<div class="down-arrow">
</div>
CSS
.down-arrow:after {
content:'\2193';
color: red;
}
edit: I want to make it responsive.
Since a pseudo element is an inline element, you need for example to give it display: inline-block (or block) for it to respond to width/height settings (though not if only to change font properties of course, as some comments assumed I meant).
.down-arrow:after {
content:'\2193';
display: inline-block; /* or block */
background: lightgray;
color: red;
height: 32px;
width: 40px;
font-size: 24px;
text-align: center;
}
<div class="down-arrow">
</div>
To increase the size of the content, you should set the font-size
Like so :
.down-arrow:after {
content:'\2193';
color: red;
font-size: 20px; // change to whatever
}
See updated EXAMPLE
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to create a button looking like this:
Is there a way to create this button using only CSS, without using the attached as a background image. I tried playing around with border-radius but was unable to achieve this.
Closest I can get you is this.... for a width of 410px and height of 294px..the actual image is by far larger than this snippet's window...good luck
div{
width:410px;
height:294px;
background:#ed1e79;
border-radius:45%;
}
<div></div>
Yes, it is possible.
Here's how you do it :
.pinkbutton {
border-radius: 240px / 120px;
background-color: #ed1e79;
width : 175.2px;
height : 126.6px;
}
<div class="pinkbutton"></div>
.ellipseDiv {
height: 50px;
width: 100px;
border: 2px solid #005;
border-radius: 50px / 25px;
background-color: #EE5D20;
}
<div class="ellipseDiv"></div>
That should get you what you want.
This example is made with a div, but can be just as easily done with a button!
You have to play with the property border-radius, so for example it will be
#your-button {
background-color: some-color;
border-radius: some-percentage;
}
Look at this
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a logo that I need to insert into an html page, that logo is in a square size but I need it to become a circle, how can I do that using CSS?
.logo {
background: url('path/to/image.jpg');
height: 100px;
width: 100px;
border-radius: 100px;
}
This should do the job. Set the background url to the one of the logo and height and width accordingly.
Use border-radius. A simple example you can see here:
img.logo {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
<img class="logo" src="http://placehold.it/100x100"/>
Use border-radius then set overflow to hidden.
use border and make
border-radius:50%;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have code like this http://jsfiddle.net/enr54x1z/
And when hovering, I want
to change table cell background color to #317EAC
to change text to white color
change cat image to another image
Please HELLPPPP
http://jsfiddle.net/enr54x1z/3/
In order to change the picture you have to remove the img tag and replace it with a div that has a background-image
the td:hover in the CSS is activated once you hover over the <td> element. Thus the following background color is applied on hover.
td:hover{
background-color:#317EAC;
}
You can extend this to apply other CSS styles when this element is being hovered over. With the following, once the <td> is hovered, we go to a child element and apply the color change CSS.
td:hover p{
color:white;
}
The same method is used to change the picture on hover:
td:hover .img-block {
background-image:url("http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg");
}
<style type="text/css">
.imgBox {
width: 191px;
height: 191px;
background: url(image-url) no-repeat; }
.imgBox:hover
{ width: 191px; height: 191px; background:
url(other-image-url) no-repeat; }
</style>
//your markup can be a div inside your td
<div class="imgBox">
</div>
On image-hover u need to simply give another url of a image!
Here is an example of what you want!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've got the following code for my html section
only the first heading creates a border and the rest are all over the place, below is two photos of what it should look like, and what it does look like...
![enter image description here][1]
![enter image description here][2]
Any ideas? Thanks!
The code is a bit messy. But if this is what you want: http://jsfiddle.net/96z7U/3/
These are the changes:
<h1 class="titleBorder">Module Details</h1>
It had no class.
#moduleDetails {
border-style: solid;
/*border-width: 1px;*/
padding: 5px;
}
I'm not sure if you intended that border.
And:
.titleBorder {
padding-top: 10px;
border-style: solid;
border-width: 1px;
margin:0 auto;
float:left;
width:100%;
}
Add float left and width 100%
The problem seems to be connected with the fact that the content below the heading have the style float:left which causes the issue. Try adding the following code before each heading with class 'titleBorder':
<div style="clear:both"></div>