I've got a layout bug with the snippet below in IE11, Chrome, Firefox - the second button is not correctly inline with the first button.
The problem goes away as soon as I add any non-whitespace content to the inner span on the second button.
Is there a CSS fix that will bring the buttons inline without requiring actual content, ideally without changing the rest of the CSS?
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder { padding: 20px; background-color: #254669 }
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
Just add vertical-align:middle to button clas like this: Demo
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
vertical-align:middle; /* added this */
}
You need to add
display: table-row;
vertical-align: middle;
in your button and
box-sizing: border-box;
display: table;
in .mainBorder class
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder {
background-color: #254669;
box-sizing: border-box;
display: table;
padding: 20px;
width: 100%;
}
button {
background-color: #254669;
border: 1px solid #53779d;
color: white;
display: table-row;
font-family: Verdana;
font-size: 13px;
height: 24px;
outline: medium none;
padding: 0 8px 1px;
position: relative;
transition: all 150ms ease-out 0s;
vertical-align: middle;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
I would suggest to not have all the spaces if you intend to have space between elements because that is hard to manage at times but if you want to keep it the same markup this css for the .iconButton:
button.iconButton{
width: 24px;
top: 7px;
padding: 0;
}
but if you want to rid yourself of the spaces then you can, optionally, the spaces would definitely affect the layout
button.iconButton{
width: 24px;
top: 3px;
padding: 0;
margin: 0 15px;
}
Related
I have a css class assigned to a button like this:
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1
}
.button a {
color: #232856;
text-decoration: none
}
.button a:hover {
color: #f1f1f1;
background: #232856
}
The .button works perfectly, does everything I need it to do.
But the a and a:hover parts do nothing.
Any ideas?
You can get rid of the a: hover and instead just use the button: hover {
Here is the code:
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1
}
.button a {
color: #232856;
text-decoration: none
}
.button:hover {
color: #f1f1f1;
background: #232856
}
That should work. When you need something with a hover effect such as a button, you dont need to include the a:, just write button: hover
I think that you might forgot about class for button, if you want to do it general then use button in styles instead of .button.
Also you forgot about semicolon after text-decoration: none, so this lane and every css style below in same block scope is not applied.
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1;
}
.button a {
color: #232856;
text-decoration: none;
}
.button a:hover {
color: #f1f1f1;
background: #232856;
}
<button class="button">
<a href="#">My a inside button<a>
</button>
Change to
.button:hover a{
// styling when on hover
}
I think I broke my BUTTON!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.btn {
background-size: 10px 10px;
background: repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);
height: 600%;
transform: rotate(-35deg);
transition: 0.3s;
}
.btn:hover {
color: gold;
}
</style>
</head>
<body>
<br><br>
<button class="btn btn-default btn-lg">Hover Over Me</button>
</body>
</html>
So , i want to make the button wider , not auto size to the text , i want it like 300px , i just try to add width on every class , but nothing seems working , is it because the button box line from text border ? i think its because the button from text border , so its auto resize with the text , am i right about it ? if that was the problem, can i click on a col-md-6 div for example ?
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Pure css popup box</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<h1>Popup/Modal Windows without JavaScript</h1>
<a class="button" href="#popup1">Let me Pop up</a>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
EDITED Can i add href on col-md-6 class ?
SOLVED add display:inline-block;
a-tag is an inline element so your height and width set are ignored. Add display: inline-block; and width: 300px; in the class button.
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display: inline-block;
width: 300px;
}
you do not need to add col-md-6 unless you want to use such space. Just add width property in the button class or in the custom class as per your need.
.button {
width: 300px;
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
display:block;
}
I started coding a week ago and I have few issues with my css and my html. I cannot get the search bar to be smaller and to adjust to the top next to my logo.I changed the font size of "search", but it seems that it does not appear anymore. I think that my search bar is maybe too low. Here are my sheets, please if someone can help.
I really do not know, maybe I have forgot few line of codes.
/*essentials css */
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 400;
line-height: 1.43;
color: #484848;
}
p{
font-size: 16px
margin: 0;
padding: 0;
}
a:link {
font-size: : 16px;
text-decoration: none;
}
a:visited{
text-decoration: none;
}
h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
ul, ol{
list-style-type;
}
::selection {
color: #fff;
background-color: #333;
}
::-moz-selection {
color: #fff;
background-color: : #333;
}
/* top- nap */
.top-nav {
position:fixed;
width:100%;
height: auto;
border-bottom: 1px solid #ccc;
}
.logo:link {
color: #484848;
display: inline-block;
transition: : all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition: all 0.3s ease;
border-right:1px solid #ccc;
}
.logo:visited{
color: #484848;
}
.logo:hover {
background-color: #f1f1f1;
}
.logo img {
position: relative;
padding: 12px 18px;
width: 100px;
border-right: : 1px solid #ccc;
vertical-align: : middle;
}
/* nav-search css */
#nav-search-wrapper {
display: inline-block;
width: 490px;
height: 100%;
}
#nav-search-wrapper form input {
padding: 22px 10px 18px 52px;
width: 100%;
border: none;
outline: none;
background-color: :red;
}
#nav-search-wrapper form input::-webkit-input-placeholder {
color: orange;
font-size:17px;
}
#nav-search-wrapper form input::-moz-placeholder {
color: orange;
}
#nav-search-wrapper form input:-ms-input-placeholder {
}
#nav-search-wrapper form input:-moz-placeholder {
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>ElephantRoom</title>
<meta charset="utf-8" />
<meta name"viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Top-NAV HTML-->
<div class="top-nav">
<a href="index.html" class="logo">
<img src="logo.png" alt="ElephantRoom" />
</a>
<div id="nav-search-wrapper">
<form method="GET" action="index.html">
<input type="text"name="search" id="nav-search" placeholder="Search"/>
</form>
</div>
</div>
</body>
</html>
If I understand correctly, you're trying to move your search bar / text closer to the left of your logo?
You should adjust the padding within the search bar, currently it's being pushed 52px from the left:
#nav-search-wrapper form input {
padding: 22px 10px 18px 52px; // change padding
width: 100%;
border: none;
outline: none;
background-color: red;
}
to something like:
#nav-search-wrapper form input {
padding: 18px 10px;
width: 100%;
border: none;
outline: none;
background-color: red;
}
I can't get an element to go where I want it to. I am only having this problem because of the way I did my header. I applied position: absolute. You can see an example here: http://jacobgasser.com and you can find all the code on there, or you can read down a little farther and I put it there.
I want the text in the top left of the page to be on the white part of the page
Here is the index.html
<body onload="loadUp();">
<div class="menu">
<a href="https://github.com/jacobgasser" target="_blank"><div
class="menuItem">Projects</div></a>
</div>
<div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
</div>
<div class="article">
<div class="articleHead">Who am I?</div>
</div>
<script src="scripts/main.js"></script>
</body>
Here is main.css
body {
margin:0;
padding:0;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
text-decoration: none;
color: inherit;
}
.article {
font-family: "Arial";
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
text-align: center;
position: relative;
}
.articleHead {
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
background-color: white;
color: black;
cursor: pointer;
-webkit-transition: 0.2s;
}
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
position: fixed;
top: 0;
}
::selection {
color: #23272A;
background-color: white;
}
::-moz-selection {
color: #23272A;
background-color: white;
}
#font-face {
font-family: lemon;
src: url("fonts/LemonMilk.otf");
}
#font-face {
font-family: cavs;
src: url("fonts/CaviarDreams.ttf");
}
A simple solution to this issue is to remove the position: fixed; top: 0; and adjust the margin-top and margin-bottom of the page. Just change the CSS for .titleBG and .title to be the following:
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}
This will give you the following result:
I would love to figure out how to create a button with CSS that has 'brackets' on each side. To clarify, not just the brackets you get by typing them, but larger brackets, like this:
You can use the before and after pseudo selectors with the content attribute:
button {
font-size: 15px;
font-weight: bold;
background: none;
border: none;
white-space: nowrap;
}
button::before {
content: "[ ";
font-size: 1.5em;
}
button::after {
content: " ]";
font-size: 1.5em;
}
button.bigtext {
font-size: 80px;
}
<button>Some Text</button>
<br />
<button class="bigtext">Some Text</button>
Here an approach where you can edit size thickness and length of the brackets involving box-shadow
.brackets {
width: 200px;
height: 50px;
box-shadow: inset 0px 0px 0px 5px black;
background: white;
position: relative;
}
.button {
height: 50px;
width: 80%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
border: none;
background: white;
font-size: 1.6em;
font-weight: bold;
}
<div class="brackets">
<button class="button">
Button
</button>
</div>
There are a few things you can do to achieve this.
First and easiest: Create a button background in Photoshop or whatever and use that as your button background.
Second: Type the brackets and button text you want and then style the separate pieces.
HTML:
<div class="button">
<p><span class="large">[</span>Button<span class="large">]</span></p>
</div>
CSS:
p {
font-size: 20px;
}
.large {
font-size: 40px;
}
Those are they straight forward ways I can think of that are really quick and easy.
Not sure I follow the question. Just put a bracket around it. Example below.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><title>Title Here </title>
</head>
<body>
<br>
<center>Your Title</center>
<br>
Some Text Data Here
<style type="text/css">
#modernbricksmenu { padding: 0; width: 100%; background: transparent; voice-family: ''}''; voice-family: inherit; }
#modernbricksmenu ul { font: bold 11px Arial; margin:0; margin-left: 40px; /*margin between first menu item and left browser edge*/ padding: 0; list-style: none; }
#modernbricksmenu li { display: inline; margin: 0 2px 0 0; padding: 0; text-transform:uppercase; }
#modernbricksmenu a { float: left; display: block; color: white; margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: black; /*Default menu color*/ border-bottom: 1px solid white; }
#modernbricksmenu a:hover { background-color: gray; /*Menu hover bgcolor*/ }
#modernbricksmenu #current a { /*currently selected tab*/ background-color: #D25A0B; /*Brown color theme*/ border-color: #D25A0B; /*Brown color theme*/ }
#modernbricksmenuline { clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #D25A0B; /*Brown color theme*/ }
#myform { /*CSS for sample search box. Remove if desired */ float: right; margin: 0; padding: 0; }
#myform .textinput { width: 190px; border: 1px solid gray; }
#myform .submit { font: bold 11px Verdana; height: 22px; background-color: lightyellow; } </style>
<div id="modernbricksmenu"> <ul> <li style="margin-left: 1px">
Home</li> <li>
New</li> <li id="current">
Revised</li> <li>
[Tools]</li> <li>
Forums</li> </ul>
</div>
<div id="modernbricksmenuline"> </div>
</body>
</html>
I didn't want to change my template, so I've come up with a pure CSS solution.
It'll also work with every background.
.btn {
position: relative;
border: none;
background: none;
padding: 8px 24px;
}
.btn::before,
.btn::after {
position: absolute;
top: 0;
bottom: 0;
width: 8px;
border: 2px solid #000;
content: "";
}
.btn::before {
left: 0;
border-right-width: 0;
}
.btn::after {
right: 0;
border-left-width: 0;
}
<a class="btn btn-primary">Buttton</a>