I have a css styled button that is being completely mangled and showing strangely on multiple lines. However if the button is set as a input instead of a link the button looks perfect. How can I get my link button to look the same as the input button?
Here is an example:
https://jsfiddle.net/tasenudr/
html:
<div style="width: 200px;">
<table style="width:80%;">
<tr>
<td style=" text-align: left; vertical-align: middle;">
<BR> <a class="btn" target="_parent" href="index.php?ts=fq">Daily
Starting from:
$15.22</a>
</td>
<td style=" width: 4%; text-align: left; vertical-align: middle; text-align:right;">
<BR>
<input type="submit" value="6 Month Plans Starting from: $75.36" style="width:90px; top:50px; height:115px; white-space: normal;" class="btn">
</submit>
</td>
</tr>
</table>
</div>
CSS:
.btn {
background: #FFCC02;
border: none;
padding: 10px 25px 10px 25px;
color: #585858;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}
.btn:hover {
color: #333;
background-color: #EBEBEB;
}
The button on the left is mangled, but the button on the right looks perfect.
A button is an inline element.
Give it a display: block; or display: inline-block;
Add display: block to your .btn css rule to prevent the inline native display of the element from mangling the text inside of it.
https://jsfiddle.net/tasenudr/1/
.btn {
background: #FFCC02;
display: block;
border: none;
padding: 10px 25px 10px 25px;
color: #585858;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 1px 1px 1px #3D3D3D;
-webkit-box-shadow:1px 1px 1px #3D3D3D;
-moz-box-shadow:1px 1px 1px #3D3D3D;
}
You have to set the .btn to display: inline-block OR display: block for this to work properly.
Updated fiddle:
https://jsfiddle.net/tasenudr/3/
.btn{
display: inline-block;
min-width: 200px;
text-align:center;
}
Related
below is the code, i had a one image, below that image there is Price and a button, i want some space between price and button which should be left and right to the image
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
.wrapper {
text-align: center;
}
.show{
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
float: right;
<div class="wrapper">
New Released
</div>
<img src="https://www.google.com.np/search?q=django+imagefield&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiHk57k89fcAhUJVH0KHbxAC08Q_AUICygC&biw=1396&bih=690#imgrc=3ukNSrarUo82hM:" style="width: 300px" height="200px">
<table>
<tr>
<td>
Price: Rs 14000
</td>
<td> Join Now</td>
</tr>
</table>
Use this approach it will work fine. Best part is you can even adjust its responsiveness with classes. Don't need to use table for such things. That's considered bad code.
You was missing closing bracket of .new class.
.new {
font: bold 11px Arial;
text-decoration: none;
background-color: #66C4C4;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
.image-container {
width: 300px;
height: 200px;
}
.image-container img {
width: 100%;
}
.image-container span {
float: left;
}
.show {
float: right;
background-color: #2D318A;
color: white;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 3px;
text-decoration: none;
<div class="wrapper">
New Released
</div>
<div class="image-container">
<img src="http://site8.dealerbase.co.nz/media/1707/300x200.gif" />
<br>
<span>Price: Rs 14000</span>
Join Now</div>
Thanks
.item-wrap{
display:inline-block;
border:1px solid #ccc;
}
.item-footer{
display:flex;
justify-content:space-around;
}
<div class="item-wrap">
<div class='item-img'>
<img src='https://picsum.photos/300/200?image=0'>
</div>
<div class='item-footer'>
<div class='price'><p>Price: Rs 14000</p></div>
<div class='item-join'>
<p>Join Now</p>
</div>
</div>
</div>
**HTML:**
<tr>
<td>
Price: Rs 14000
</td>
<td class="joinButtonAlign"> Join Now</td>
</tr>
**CSS**
.joinButtonAlign{
display: inline-block;
padding-left:30px;
}
Got a problem with aligning a div and an input next to each other to create that classic input with icon. However, when I use Safari/Mac and Safari/iOS, it appears like this:
Broken in Safari
... and I just can't get my head around it! It's fine on Chrome and I've tried playing around with the floats, vertical align (don't know how relevant this is), but still nothing.
HTML:
<div class="input-with-icon">
<div class="icon">X</div>
<div class="input"><input type="text" placeholder="Start typing to find a customer..."></div>
</div>
CSS:
.input-with-icon .icon {
float: left;
background-color: #fff;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
padding: 13px 0 14px 10px;
color: grey;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
.input-with-icon .input {
overflow: hidden;
}
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
}
Here's a fiddle if this helps you guys with my code - for some reason the right border doesn't want to work on the fiddle but not fussed about that bit as it's fine everywhere else.
https://jsfiddle.net/r08gxre3/1/
Any help would be much appreciated, thanks guys! :)
Just add margin: 0px; to your input element. It should be that!
Like:
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
margin: 0px;
/* or just margin-top: 0px; */
}
Fiddle: https://jsfiddle.net/bbdkzuyn/
I am trying to make to simple buttons. Easy. However they will not for some reason round off the corners of the outline. This is what i have for my HTML and CSS
<a class="login-worker" href="">LOG IN AS A WORKER</a>
<a class="login-user" href="">LOG IN AS A USER</a>
.login-worker,
.login-user {
font-size: 22px;
font-weight: 600;
outline: 3px solid #000000;
margin: 5px;
text-decoration: none;
color: #000000;
padding: 20px;
padding-right:75px;
padding-left:75px;
position: relative;
border-radius: 5px;
background-color: #248FD4;
}
Use border: solid 2px #000; not outline.
Example here
.login-worker,
.login-user {
display: block;
font-size: 22px;
font-weight: 600;
border: solid 2px #000;
margin: 5px;
text-decoration: none;
color: #000000;
padding: 20px;
padding-right:75px;
padding-left:75px;
position: relative;
border-radius: 5px;
background-color: #248FD4;
}
The cause seems to be outline: 3px solid #000000;
Change to:
border: 3px solid #000000;
border-radius: 5px;
After all, your question states Why won't my **border** round off it's corners?
But if it's outline you need then please see Outline radius? (user289112 provided link but removed his answer)
I want to show a p tag or legend tag or any html text like button. But how is it possible? I have tried with css but not working well.
I want to show it like button.
<p class="button" >Submit</p>
or
<a class="button" >Submit</a>
or
<legend class="button" >Submit</legend>
Now need the button class.
Just apply css styles and cursor: pointer; to it to make it appear that it's a button
.button{
display: inline-block;
background: #000;
border-radius: 4px;
font-family: "arial-black";
font-size: 14px;
color: #FFF;
padding: 8px 12px;
cursor: pointer;
}
JSFIDDLE
It is simple with css.
<p class='btn'> Button 1 </p>
And Your CSS
.btn{
float:left;
width:auto;
height:30px;
display:block;
border:1px solid #ff6600;
background:#00ff00;
color:#000;
line-height:30px;
text-align:center;
padding:0 20px;
border-radius:3px;
}
.btn:hover{
cursor:pointer;
}
jsfiddle : http://jsfiddle.net/ob67xnw4/1/
Try This.
Here is the Working FIDDLE
CSS
.button {
width: 75px;
background: #d2d2d2;
text-align: center;
float: left;
color: #000;
line-height: 32px;
text-decoration: none;
}
.button: hover{
width: 75px;
background: #0e567f;
color: #fff;
text-align: center;
float: left;
line-height: 32px;
text-decoration: none;
}
<p class='button'> Submit </p>
.button{
background: -webkit-linear-gradient(top, #CCB5B6 20%, #274936 70%);
width: 100px;
height: 40px;
font-family: sans-serif;
font-size: 25px;
text-align: center;
line-height: 40px;
color: #96F256;
border-radius: 10px;
box-shadow: 0 2px 5px 3px black;
cursor: pointer;
}
.button:hover{
color: white;
}
OUTPUT
I think you should use this code and it is working well. You can change Color according to you.
Live Demo
HTML Code:
<input class="round-button-circle" type="submit" value="Submit"/>
CSS Code:
.round-button-circle {
width: 150px;
height:50px;
border-radius: 10px;
border:2px solid #cfdcec;
overflow:hidden;
font-weight: 15px;
background: #4679BD;
box-shadow: 0 0 3px gold;
}
.round-button-circle:hover {
background:#30588e;
}
Result:
Had just got what did I want.
DEMO JSFIDDLE
.button {
display: inline-block;
outline: none;
cursor: pointer;
border: solid 1px #da7c0c;
background: #478dad;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .3em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
position: relative;
top: 1px;
}
I'm having trouble aligning a regular <button> beside an input in Firefox. I get the following output in Firefox:
The input class is university and the button class is next and the CSS code is the following:
.university {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-transform: uppercase;
padding: 20px;
width: 400px;
display: block;
border: none;
color: #000;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
outline-style: none;
outline-width: 0px;
outline-color: #000;
}
#next {
background-color: #C44D58;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
text-transform: uppercase;
width: 150px;
padding: 20px;
margin: 0;
color: #FFF;
border: none;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
outline-style: none;
outline-width: 0px;
outline-color: #000;
}
And the HTML is:
<div class="universityContainer">
<input type="text" class="university typeahead" placeholder="University Name">
<button id="next">NEXT</button>
</div>
The CSS for .universityContainer is:
.universityContainer {
display: table-cell;
vertical-align: middle;
}
Note: It should be noted that it renders correctly in every browser except for Firefox.
Remove display: block from the .university. Fiddle: http://jsfiddle.net/gf9Tr/
You can remove display: block; or you can use display: inline-block; in class university instead.
You need to change display:block on the input element to display: inline-block.
Here is a jsbin to show them lining up correctly.