currently learning how to develop HTML/CSS websites and I'm struggling to find resources that could help me dev a practice project that I'm doing.
Could anyone teach me how to dev something like this through CSS.
Button Samle
A button with circular icons/image for mobile. I need to make the image/icon circular and fit the button but when I just use this, the whole button resizes to the image size.
<button class="btn"><img src=""></img> Home</button>
And hopefully someone could also help with with the CSS in order to make it something like this on mobile. A menu of buttons that 2 of the buttons take up the whole size of the screen.
Button List
For learning CSS and HTML i don't suggest you to start creating elements like this button because your button is not useful in websites, like its not flat or material its something basic and after days of learning css you can make it.
anyway i suggest you to do front-end of this page its much useful for you!
and almost every basic ui developer uses this page.
I love teaching code's so if you're really interested i can help you in every time you stuck on this project. :)
btw i created your button take a look hope you like it. :)
.btn {
padding: 13px 0;
background-color: #fff;
border:1px solid #707070;
width:100%;
display:inline-block;
max-width: 229px;
position: relative;
cursor:pointer;
}
.txt {
font-size: 23px;
color: #707070;
font-weight: 500;
margin-right: 40px;
}
.btn:focus {
outline: 0;
}
.icon {
width: 43px;
height: 43px;
background-color: #fffbc6;
border-radius: 50%;
border: 1px solid #707070;
position: absolute;
top:4px;
left: 9px;
}
<button class="btn"><div class="icon"></div><span class="txt">Button</span></button>
Check this neat button, used font-awesome icons, and bootstrap themed btns
.btn {
display: inline-block;
font-weight: 400;
color: #000;
text-align: center;
vertical-align: middle;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.875rem 1rem;
font-size: 0.875rem;
line-height: 1;
border-radius: 0.1875rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #248afd;
border-color: #248afd;
}
.btn-primary:hover {
color: #fff;
background-color: #0276f8;
border-color: #0270ec;
}
.btn i {
padding: 0 5px 0 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button type="button" class="btn btn-primary btn-icon-text">
<i class="fa fa-upload "></i>
Upload
</button>
You can look w3schools tutorials.
For HTML : https://www.w3schools.com/html/
For CSS : https://www.w3schools.com/css/
I highly recommend you look Bootstrap 4 to build responsive pages.
For Bootstrap4 : https://www.w3schools.com/bootstrap4/
button{
display:table;
width:100px;
text-align:left;
padding:2px;
}
button > img {
display:inline-block;
vertical-align: middle;
padding-right:10px;
}
<button><img src="https://davidwalsh.name/demo/css-circles.png" width="20px" height= "20px">Home</button>
w3schools is a great resource for the basics of css and html
basically you change the style of the button :on hover
The hover style sets the image for the button to be different.
https://www.w3schools.com/css/css3_buttons.asp
Related
I have created this page here Page
and I want to make it editable in such a way that I want pencil icons in front of each heading and in front of each paragraph and image respectively and once I click on the edit icon the text comes in the textbox field. How can i do this? What is the best possible solution. I just need a little help with bringing the text in textbox field on pencil icon click. Should i be using any built in property of css if there is any? or should I use any package?
If I'm understanding your intent correctly, you just want to do something like this with a quick illusion of editable labels?
.special-edit {
position: relative;
}
.special-edit input {
font-family: 'FontAwesome';
font-size: 2rem;
padding: .5rem 0 .5rem 2.5rem;
width: 100%;
border: none;
border-bottom: transparent 3px solid;
outline: 0;
transition: .35s ease;
}
.special-edit input:hover, .special-edit input:focus {
background-color: #f1f1f1;
border-bottom: #ddd 3px dotted;
}
.special-edit:after {
font-family: 'FontAwesome';
content: '\f044';
position: absolute;
top: 1rem;
left: .5rem;
color: gray;
font-size: 1.5rem;
}
body {
margin: 3rem 5rem;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="special-edit">
<input type="text" placeholder="Hey this needs edited" required/>
</div>
...and a CODEPEN to tinker. Cheers!
Many WYSIWYG editors use a HTML property called "editable" to turn divs into editable objects
https://www.w3schools.com/TAGS/att_global_contenteditable.asp
That said, what you want to achieve is a homoungus task, you´d be better using some js framework to create text editors, and tinyMCE is the industry standard.
I'm working on a really simple little bit of CSS, where the cursor changes to a pointer when the mouse moves over it.
I've been looking at this code for hours, and I can't figure out why the cursor will not change to a pointer. When I move over the div, it changes briefly and then changes back to arrow.
It's probably something really simple, but I just cannot see it.
.holder{
width:1000px;
overflow: auto;
margin: 0 auto;
font-family: 'Abel';
padding-left: 50px;
padding-top: 50px;
position: relative;
}
.action_pod{
float:left;
border-radius: 10px;
border: 1px solid #777;
font-family: 'Abel';
margin: 10px;
overflow: hidden;
padding:2px;
cursor:pointer;
}
.act_pod{
background-color: #cf9b63;
color: #fff;
width:100%;
border-radius: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 1em;
text-align: center;
cursor: pointer;
}
a:link{
text-decoration: none;
color:inherit;
cursor: pointer;
}
a:visited{
text-decoration: none;
color:inherit;
cursor:pointer;
}
<div class="holder">
<div class="action_pod">
<div class="act_pod">
add new raw season
</div>
</div>
</div>
update: Thanks for all the suggestions. I've tried them all and so far nothing has worked. I'm wondering if there's something hinky in my browser now...
update 2: Looks like its an error on my Mac somehow, as no links on any website make the cursor become a pointer. Surprised my question got marked down as I was only seeking help on an issue I was having and gave all the info I had as I went along.
update 3: Apparently it's an issue with running Photoshop CC on Mac at the same time. Found the solution here if anyone has the same problem in the future. https://apple.stackexchange.com/questions/151370/my-cursor-is-wrong-in-certain-apps-safari-chrome-mail
You should use
divName:hover {
cursor: pointer;
}
Add the CSS to the parent div
holder:hover {
cursor: pointer;
}
Remove all the cursor:pointer; bits you have right now in your code, and add this to your css:
.act_pod:hover{
cursor: pointer;
}
It's really simple try this.
body{cursor:default;}.holder a:hover{cursor:pointer;}
Remove All Cursors In Other Div's Classes
And Add This Property In Your Class
.holder:hover{
........
cursor:pointer;
}
I am trying to achieve the following using bootstrap button and custom css. I am not sure how to add a separation with a button and have two sets of labels within it. So far, I am able to create a button with label in it.
Working codeply demo
DEMO
You can do this with mark-up (html) only:
<button>
<h4>Titel</h4>
<hr/>
<span>More</span>
</button>
But this will look a bit weird so by adding some css make it look better.
button span {
font-size: 0.7em;
}
button hr {
margin: 2px;
}
Try this,
Demo
.productButton.selected {
background-color: rgb(0, 146, 143);
color: #FFF;
}
.productBtnText{
font-size:25px;
border-radius:0;
width:100%;
border-bottom:2px solid #000;
}
.productButton{
border:2px solid #000;
margin:0px;
padding:0;
height: 100px;
width: 200px;
font-size: 15px;
white-space: normal;
position: relative;
}
I basically want to create a button like the big "Download Bootstrap" button on this side: http://getbootstrap.com/
Note: I want to create the button myself just with css & html and not with the twitter-bootstrap framework
I was able to do it pretty well but then I noticed that there was a bug: http://jsfiddle.net/vk5DV/
If you zoom in while hovering over the button you will notice that in the corner of the button there is something wrong. I think the link itself gets styled with the white background but I have no idea why.
#googlink a {
color: white;
transition: all 0.2s linear 0s;
}
#googlink :hover {
background-color: white !important;
color: #99CC00;
}
why does the link get a white background too (and not only the button div)?
If a border-radius is added it seems ok
eg
#googlink :hover {
background-color: white !important;
border-radius: 6px;
color: #99CC00;
}
http://jsfiddle.net/f3kzb/show/
Although if you simplify it a bit, i think it works fine with the code you already have. Also specified as a class to be used with any link.
http://jsfiddle.net/fe25t/
html
<div id="green">
Google
</div>
css
body {
margin: 0;
padding: 0;
}
#green {
background-color: #99CC00;
}
a {
text-decoration: none;
color: black;
}
.special-link {
border-radius: 10px;
margin: 40px;
display: inline-flex;
height: auto;
width: auto;
font-size: 65px;
background-color: #99CC00;
border: 2px solid white;
color: white;
transition: all 0.2s linear 0s;
}
.special-link:hover {
background-color: white !important;
color: #99CC00;
}
Do not use a div, just style the link (a).
Currently you are styling both the link and the div, which is not necessary - this creates conflicts and, semantically, is useless.
You would want to use a div only if you needed to nest multiple elements within it and then position the div to position all the elements at once (just an example).
There you go.. check this out.. The hover border has to be round so that it does not overlap the normal border. This addition is under the hood of the main button border so it does not pop out at the corners.
#googlink :hover {
border-radius: 6px;
background-color: white !important;
color: #99CC00;
}
http://jsfiddle.net/47vDq/
I'm currently at a loss concerning this issue. What I'm making is a WYSIWYG editor (much like the one I am using right now) and the problem is the buttons on top. I have made a CSS class of their layout:
.test {
background-color:#d0d0d0;
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
The layout works fine but I am unable to find a proper way to link the class. Take this for example(ignore the JavaScript):
<input type="submit" class="test" value="B" onClick="texta(text,'b','b')" onmouseup="text.focus();">
Problem is that any buttons (<button>, <type="submit> etc) tend to deform the original design, giving it 3-dimensional look and generally making it look more like a button.
My question is, how do I work around this? I've tried to link the class in several different ways but it just won't work.
Picture:
I usually go with:
html:
<div class="test"><a data-js="texta(text,'b','b')" href="http://someOtherLikeActionIfTheresNoJs"></a></div>
css:
.test {
[ ... snipped your style ... ]
position: relative;
}
.test a {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
Tweaked your css just a bit
.test{
background-color:#d0d0d0;
border: 1px solid #f5f5f5; //<--add this
color:#000000;
font-family:arial;
font-size:12px;
font-weight:bold;
padding:2px 7px;
text-decoration: none;
}
.test:hover {
padding: 1px 6px;
background-color:#789dfa;
border: 1px solid #485ae0;
}
Works on input or button elements
Here's a FIDDLE with the result.