Hello I want to have a button on my website and I want to resize the text on my button. How do I do this?
My code is below:
<input type="submit" value="HOME" onclick="goHome()" style="width: 100%; height: 100px;"/>
Try this
<input type="submit"
value="HOME"
onclick="goHome()"
style="font-size : 20px; width: 100%; height: 100px;" />
Try this, its working in FF
body,
input,
select,
button {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
}
Belated. If need any fancy button than anyone can try this.
#startStopBtn {
font-size: 30px;
font-weight: bold;
display: inline-block;
margin: 0 auto;
color: #dcfbb4;
background-color: green;
border: 0.4em solid #d4f7da;
border-radius: 50%;
transition: all 0.3s;
box-sizing: border-box;
width: 4em;
height: 4em;
line-height: 3em;
cursor: pointer;
box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
text-align: center;
}
#startStopBtn:hover{
box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
background-color: #29a074;
}
<div id="startStopBtn" onclick="startStop()" class=""> Go!</div>
Without using inline CSS you could set the text size of all your buttons using:
input[type="submit"], input[type="button"] {
font-size: 14px;
}
Related
I made some input boxes with 0 20px padding placeholders. However the text I type inside ignores padding and starts from the exact left side (from the left outline). Is there any possibility to position it inside the input field?
HTML:
<div class="input-border">
<label for="sign-login"><i class="fas fa-envelope"></i></label>
<input type="text" name="sign-login" placeholder="Enter your Email">
</div>
CSS:
input::placeholder {
font-size: 16px;
font-family: $font-base;
color: #979797;
padding: 0 20px;
height: 38px;
}
.input-border {
width: 340px;
margin: 10px 0;
border: 1px solid #DEDEDE;
border-radius: 0.5em;
}
I'd like the text I type to start from the same place as my placeholder is
in this case with 0 20px padding.
target the input text input[type=text]{padding:0 20px;}
input::placeholder{
font-size: 16px;
font-family: $font-base;
color: #979797;
padding: 0 20px;
height: 38px;}
.input-border
form .input-container .input-border {
width: 340px;
margin: 10px 0;
border: 1px solid #DEDEDE;
border-radius: 0.5em;}
input[type=text]{padding:0 20px;}
<div class="input-border">
<label for="sign-login"><i class="fas fa-envelope"></i></label>
<input type="text" name="sign-login" placeholder="Enter your Email">
</div>
Use this to add padding to the placeholder.
input::placeholder {
padding: 0 20px;
}
Use this to add padding to input text.
input {
padding: 0 20px;
}
CSS:
.center {
text-align: center;
margin: 0;
}
I am trying to make my textbox and button look responsive and stays inline-block even when I use mobilephone.I want the width of the text boxes to expand based on the browser to use more of the screen.
My html look like this:
<div id="wrapper">
<li class="input-button">
<div style="float:left;">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60"/>
<div id="loader" style="display:none;"><img src="loader.gif" /></div>
</div>
<div style="float:left;margin-left:10px;">
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
</div>
</li>
</div>
and css part look like this:
body{
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin:0 auto;
padding:0;
}
.input-button
{
margin:20px auto;
display:inline-block;
}
#KUNDE{
padding: 10px 5px;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
I have tried to implement CSS3 flexbox and CSS calc() like adding #Kunde { display: flex; } and .input-button input { width: calc(100% - 160px); }
and removing the size="60" from html and using width attribute in CSS like #KUNDE{ width=100%; }. Those methods did not help me out the solve problems or I couldn't use them in the proper way :(
Any suggestion will be highly appreciated.
Try the following. Use cal() and width: 100% in necessary place to achieve this
body {
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0;
}
.input-button {
display: inline-block;
width: 100%;
}
.input-wrapper {
width: calc(100% - 140px)
}
#KUNDE {
padding: 10px 5px;
font: bold 16px'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
margin: 0 10px;
padding: 5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
<div id="wrapper">
<li class="input-button">
<div class="input-wrapper" style="float:left;">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value="" />
<div id="loader" style="display:none;">
<img src="loader.gif" />
</div>
</div>
<div style="float:left;margin-left:10px;">
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
</div>
</li>
</div>
your html is pretty messy so I removed all unnecessary tags:
<div id="wrapper">
<form name="searchbar">
<input type="text" id="KUNDE" placeholder="Search by name or ID." value=""/>
<button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
<div id="loader" style="display:none;"><img src="loader.gif" /></div>
</form>
</div>
basic idea is to express the widths of the elements in percentage and if you want to fine tune it you can add media queries for different sizes:
body{
background: #f5fffa;
font-family: 'Lora', serif;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
max-width: 940px;
margin:0 auto;
padding:0;
}
.input-button {
margin:20px auto;
display:inline-block;
}
form {
width: 100%;
}
form input {
width: 79%;
box-sizing: border-box;
}
form button {
float: right;
width: 19%;
box-sizing: border-box;
}
#KUNDE{
padding: 10px 5px;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #a4c3ca;
background: #f1f1f1;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;
}
css could be little bit cleaner also but I don't want to mess with your styles :)
here it is in action:
http://codepen.io/1GR3/pen/mAqyZr?editors=1100
There's a number of solutions to your problem. I've outlined three options with some example code below. Some adjustments will need to be made to meet your specific needs but should be trivial.
* {
box-sizing: border-box;
}
[id] {
margin: 10px 0;
}
input {
width: 100%;
margin-right: 10px;
}
#example-1 input {
/* minus button width + input margin */
width: calc( 100% - 85px );
}
#example-1 button {
width: 75px;
}
#example-2 {
margin-left: -10px;
margin-right: -10px;
overflow: hidden; /* clearfix */
}
#example-2 div {
float: left;
padding: 0 10px;
}
#example-2 div:nth-child(1) {
width: 60%;
}
#example-2 div:nth-child(2) {
width: 40%;
}
#example-2 button {
width: 100%;
}
#example-3 {
display: flex;
justify-content: space-around;
}
<h2>Floated with Calc() - <small>Fixed Size Button</small></h2>
<div id="example-1">
<input type="text"><button type="text">Fixed Width</button>
</div>
<h2>Constrain Width with Container Elements - <small>Percentage Size Button</small></h2>
<div id="example-2">
<div>
<input type="text">
</div>
<div>
<button type="text">Percentage Width</button>
</div>
</div>
<h2>Flexbox</h2>
<div id="example-3">
<input type="text"><button type="text">Hent</button>
</div>
The first example shows the use of calc(). I'm guessing you were close before but might have applied it to the wrong elements and/or applied incorrect values.
The second example show a grid approach where you place elements inside of other elements that make a grid. Those elements are then set to take up a certain portion of their containing element. This is similar to Bootstrap and other CSS frameworks.
For the second example I also added a demonstration of making the button with a flexible width. Though not required for that solution, if a fixed size is used then you would want to switch to example one or three if both items need to take up the full width of the parent element.
The third example shows flexbox.
I have a .button class which on the active state adds an inset box shadow and increases the line-height by 2 to give a button press effect. But the button adjacent to it and the text below it also move down which I do not want. Could you please tell me how can I achieve this effect without the anything else moving?
Note: I only want the text inside the button to move down by 2px on button press and hence I chose using the line-height.
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
Just add vertical-align: top; to your .button styles.
Default value of vertical-align property is base-line. When one button is focused, because of change in its line-height, alignment of .button elements gets disturbed and as a result it push down the below content.
.button{
display: inline-block;
vertical-align: top;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
I would suggest making the line height 38px and adding transparent box shadow (of the same height) when button is not active. This way in active state nothing will be moved.
You can try this with a transformation:
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
transform:translateY(2px);
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
I have a set of buttons in html:
<div class="controls">
<div id="s-controls">
<button class="control-btn" style="background-color: #2de7f6">1</button>
<button class="control-btn" style="background-color: #69a6ea">2</button>
<button class="control-btn" style="background-color: #736ace">3</button>
<button class="control-btn" style="background-color: #372ac3">4</button>
</div>
</div>
that I want to shrink when minimizing the page. Right now when doing that, the buttons mantain their size and the design looks messy.
I have tried many things with css but I am not really good at it. This is what I have so far:
.controls {
background-color: #1F1F1F;
min-height: 50px;
}
button {
margin: 20px auto;
max-width: 100%;
}
#s-controls, #p-controls {
text-align: center;
}
#s-controls > *, #p-controls > * {
font-family: "Titillium Web", sans-serif;
font-weight: 600;
color: white;
cursor: pointer;
}
.control-btn {
display: inline-block;
/*border-radius: 4px;*/
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
line-height: 2.5em;
padding: 0 3em;
text-decoration: none;
}
line-height: 1.75em;
padding: 0 0.75em;
}
.control-btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
I intend to do this in pure html and css. The idea is to shrink the buttons at some point that they mantain the original one row design.
Any help would be appreciatted!
Try setting a width for the all of the containers (#s-controls, div.controls), and setting the actual width for the buttons, not just the max-width.
div.controls { width: 100%; }
#s-controls { width: 100%; }
button { width: 100%; max-width: 100%; }
Using media queries will give you the manipulation you are looking for at different devices and/or shrinking your browser.
Do this for all widths you are looking for and adjust the padding accordingly:
#media (max-width:991px){ //change this number to 768px, 560px, 480px, etc
.control-btn {
padding: 0 2em;
}
}
For different devices alignments you can use media query. For example for mobile width I have added button {width: 100% !important;} so that it will not collapse..
Please let me know if you are not looking for this
#media screen and (max-width: 480px) {
button {
padding: 0 2em !important;
}
}
controls {
background-color: #1F1F1F;
min-height: 50px;
}
button {
margin: 20px auto;
max-width: 100%;
}
#s-controls, #p-controls {
text-align: center;
}
#s-controls > *, #p-controls > * {
font-family: "Titillium Web", sans-serif;
font-weight: 600;
color: white;
cursor: pointer;
}
.control-btn {
display: inline-block;
/*border-radius: 4px;*/
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
line-height: 2.5em;
padding: 0 3em;
text-decoration: none;
}
line-height: 1.75em;
padding: 0 0.75em;
}
.control-btn:hover {
box-shadow: inset 0 1px 1px rgba(255,255,255,0.5),
inset 0 1.5em 1em rgba(255,255,255,0.3);
}
<div class="controls">
<div id="s-controls">
<button class="control-btn" style="background-color: #2de7f6">1</button>
<button class="control-btn" style="background-color: #69a6ea">2</button>
<button class="control-btn" style="background-color: #736ace">3</button>
<button class="control-btn" style="background-color: #372ac3">4</button>
</div>
</div>
.
What you want is to add nowrap to the container for buttons:
#s-controls { white-space: nowrap; }
but you also need to define button width:
.control-btn {
max-width: 90px;
width: 24%;
}
You can play with those values to fine-tune them.
Also, you have an extra closing curly bracket in .control-btn that messes up the code. Delete it.
padding: 0 3em;
text-decoration: none;
/* } extra bracket */
line-height: 1.75em;
padding: 0 0.75em;
See it in the fiddle
I´m trying to do some buttons with image and text, and I already did this work.
But now I´m studying a diferente hypothesis, If I have a text bigger I´m trying to center the text in the button but I´m not having sucess put this right. I´m not having succeess putting my very big is not good align-center just below the 1st text.
Have you ever had a case like this? How we can solve this?
I have this Html for two buttons:
<button class='btn'>
<img class="big_btn" src="icon1.png" width="40" height="40"/>
Big button so big <span> very big is not good</span>
</button>
<button class='btn'>
<img src="icon1.png" width="40" height="40">
2button big
</button>
And I have this css file:
.btn {
position: relative;
width: 180px;
height: 60px;
margin-top:7%;
padding: 0 10px 0 10px;
line-height: 37px;
text-align: left;
text-indent: 10px;
font-family: 'bariol_regularregular';
font-size: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1f1f1; /* button background */
border: 0;
border-bottom: 2px solid #999; /* newsletter button shadow */
border-radius: 14px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #999;
box-shadow: inset 0 -2px #999;
}
.btn:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn img { float: left;}
.btn .big { margin-top:10px;}
.btn:hover { background-color: #f7f7f7;}
Here's the Fiddle: http://jsfiddle.net/3F9pu/
My image updated:
Your problem is your line-height attribute. If you set that to be 37px, each new line of text will be separated by 37px. Remove `line-height:37px and the text will wrap around the image.
line-height: 37px
I also removed your text-indent and replaced it with a margin on your floated image to make the text all align properly.
.btn img{
float:left;
margin-right: 10px;
}
text-indent: 10px
JSFiddle
Use a CSS background image.
Have a fiddle - Fiddle Link!
HTML
<button class='btn'>Big button so big very big is not good</button>
<button class='btn'>2button big</button>
CSS
.btn {
background: url("http://lorempixel.com/output/cats-q-c-40-40-3.jpg") #CCC 10px no-repeat;
border: none;
padding: 10px 10px 10px 60px;
width: 200px;
text-align: left;
vertical-align: top;
min-height: 60px;
cursor: pointer;
}
.btn:hover {
background-color: #F00;
}