enter image description here
I'm trying to make a button look like this in css but I can't figure out how. Someone please help me!
I haven't tried anything yet.
The picture is very blurry, but it should be something like this.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding:0;
}
.button {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
border: none;
border-radius: .5rem;
overflow: hidden;
color: white;
font-size: 1.3rem;
}
.button > * {
padding: .5rem .8rem;
}
.tick {
background: green;
}
.content {
background: lightblue;
}
<button type="button" class="button">
<div class="tick">v</div>
<div class="content">Start</div>
</button>
Related
I have a Navbar that has a <li> and one of those list items have a ID of Navbar-login-btn. I am able to modify just that ID in the css, however whenever I try to use the :hover function on it; it does not work.
Is there something I am doing wrong here, because I am not sure. Any help would be nice, thank you!
Navbar.jsx:
import '../App.css';
import myAvatar from '../images/avataaars.png'
function Navbar() {
return(
<div className='Navbar-container'>
<img src={myAvatar} className='Nav-logo'/>
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li id='Navbar-login-btn'>Login</li>
</ul>
</div>
)
}
export default Navbar;
App.css:
.Navbar-container{
margin: 0;
width: 100%;
display: flex;
align-items: center;
position: fixed;
background-color: #fff;
box-sizing: border-box;
padding: 10px 40px 10px 40px;
}
.Nav-logo {
width: 75px;
height: auto;
}
#Navbar-login-btn {
border: 2px solid rgb(101, 201, 255);
border-radius: 20px;
color: rgb(101, 201, 255);
cursor: pointer;
}
#Navbar-login-btn:hover {
color: #fff;
background-color: rgb(101, 201, 255);
}
.Navbar-container ul{
width: 100%;
display: flex;
justify-content: space-evenly;
font-family: Russo One;
list-style: none;
gap: 40px;
}
.Navbar-container li{
padding: 10px;
}
First, I recommend you use a kebab-case for the CSS property.
example - navbar-container. lowercase with a hyphen.
By the way, you don't have to use an ID to grab the element you want.
you can use last-child method.
In your case:
If the Login is the last Element in the list. use this:
// for the navbar
.navbar-container{
margin: 0;
width: 100%;
display: flex;
align-items: center;
position: fixed;
background-color: #fff;
box-sizing: border-box;
padding: 10px 40px 10px 40px;
}
// for ul in the navbar
.navbar-container ul{
width: 100%;
display: flex;
justify-content: space-evenly;
font-family: Russo One;
list-style: none;
gap: 40px;
}
// for li ul in the navbar
.navbar-container ul li{
padding: 10px;
}
// for last li ul in the navbar
.navbar-container ul li:last-child {
border: 2px solid orange;
}
You have same background-color on #Navbar-login-btn & #Navbar-login-btn:hover
Try replacing different color on one of them
Example:
#Navbar-login-btn:hover {
color: #fff;
background-color: rgb(15 98 143);//place this new color
}
Playcode: Sample result here
I was trying to make the homepage layout for a project that I'm doing with the help of a course and they SCSS to style their Reactjs. But the layout isn't the same to the one in the course even after using the exact same styling. So, please help me out.
Thanks in advance.
Expected :
Result :
Here's the styling :
.homepage {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 80px;
}
.directory-menu {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 15px;
&:first-child {
margin-right: 7.5px;
}
&:last-child {
margin-left: 7.5px;
}
.content {
height: 90px;
padding: 0 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid black;
.title {
font-weight: bold;
margin-bottom: 6px;
font-size: 22px;
color: #4a4a4a;
}
.subtitle {
font-weight: lighter;
font-size: 16px;
}
}
}
Here's the code :
<div className='homepage'>
<div className='directory-menu'>
<div className= 'menu-item'>
<div className='content'>
<h1 className='title'>HATS</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
</div>
.
.
.
.
</div>
What you have works. It's a dynamic layout so your viewing width effects it; resize the browser and you'll see:
https://codesandbox.io/s/nifty-kalam-1bx9t?file=/src/styles.scss
I need to align text near an icon to middle.
See the admin word near the user icon in this sandbox:
https://codesandbox.io/s/fragrant-morning-267l5
I have this css, but it's not taking affect:
.HeaderToolbar {
background-color: black;
color: white;
fill: white;
width: 100%;
margin: 0 auto;
align-items: baseline;
vertical-align: middle;
/*white-space: nowrap;*/
}
I would suggest you to use elements like header, nav and div for layout along with flexbox instead of going for table to layout your header.
Please check following code. It shows basic mark up for header component with navigation and logo.
header {
width: 100vw;
height: 54px;
}
.header {
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0 8px;
}
.logo {
flex: 1;
}
nav {
flex: 2;
display: flex;
justify-content: flex-end;
}
button {
padding: 8px 12px;
color: white;
border: none;
cursor: pointer;
}
.ghost {
color: black;
background: transparent;
}
<header>
<div class='header'>
<div class="logo">
<h2>Logo</h2>
</div>
<nav>
<button>Projects</button>
<button>Projects</button>
<button class='ghost'>Admin 😳</button>
<button>Profile</button>
</nav>
</div>
</header>
You need to add a class to your element and then add a css to your class:
display: flex;
justify-content: flex-start;
align-items: center;
I'm trying to create a simple calculator using only HTML and CSS for the layout and, eventually, pure JavaScript for the functions.
I want the site/page to be responsive which is why I am using CSS Grid and no absolute units; % and fr instead of px...
The calculator itself should be a grid of centred squares with the text in the buttons centred both horizontally and vertically and all of the buttons should fit within the "calculator".
<html>
<body>
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
</body>
</html>
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
padding: 1%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 2%;
justify-items: center;
align-items: center;
}
div.calc > button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
vertical-align: center;
text-align: center;
width: 100%;
height: 0;
padding: 50%;
}
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
Codepen
The calculator div does not appear to be high enough to hold the buttons and the bottom row of the grid therefore overlaps and bleeds outside of the calculator.
I tried playing around with the height of the calc div (height: 100% ...) but the last row always goes over...
I can't seem to get the text inside the button to centre properly; especially horizontally. The '+ / -' button is a good example. I've set the text-align as center and both the justify-items and align-items are center. I know those last two refer to the button items themselves within the grid. But I can't see where else to get the text to centre properly.
I'm hoping this is something outright simple and I've just been staring at the same code, over and over again, for oh too many hours.
If you would rather not correct my code and prefer to point me to any online examples or explanations which would help I will gladly do my homework.
Thanks!
The issue is the grid-gap:2%. It's working for horizontally because we can resolve the 2% based on the width but for the height it won't work since there is no height defined. Basically, the browser is first calculation the height without the gap, then the gap is addedd.
You should consider px or another unit like vw/vh for this one. I have also changed the way you are centring the button. (Centering in CSS Grid)
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 1vw;
padding: 1vw; /*make the padding the same*/
}
div.calc>button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
/*to center*/
display: flex;
align-items: center;
justify-content: center;
/**/
}
/*keep the ratio*/
div.calc>button:before {
content: "";
display: inline-block;
padding-top: 100%;
}
/**/
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
Alternative solution with flexbox method with three column button box. I hope this will be helpful for you.
* {
box-sizing: border-box;
position: relative;
}
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
padding: 1%;
/* display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 2%;
justify-items: center;
align-items: center; */
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
}
div.calc > button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
vertical-align: center;
text-align: center;
height: 0;
padding: 12%;
flex-grow: 1;
width: 31%;
height: 31%;
margin: 5px;
}
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
Two of the link buttons in my nav have long-ish names, and they're text-wrapping and becoming two lines tall even though (as far as I can tell) there's nothing stopping them or the nav from growing wider. Have I just missed something?
The code is quite long, so you'll probably be happier viewing the codepen than reading it here. It's so long because I'm afraid something I've overlooked in my global styling or my media query changes is to blame for this bug.
EDIT: This one was an easy answer. I misunderstood selector precedence. I thought media queries took precedence over everything (except inline). So I didn't realize the nav a rule in my media query was not overwriting the nav > section > a in my base CSS. A good lesson about always respecting CSS selector precedence.
HTML
<section>
<nav>
<a id="NSFW_deactivateFilter" onClick="worksafeOff()" href="#">Worksafe Mode: On</a>
<h2 onClick="showMenu()">Category Filters</h2>
<div></div>
<section id="nav_Orientation">
<a id="Horizontals" href="#">Horizontals</a>
<a id="Verticals" href="#">Verticals</a>
</section>
<div></div>
<section id="nav_Category">
<a id="Biltmore" href="#">Biltmore</a>
<a id="Commercial" href="#">Commercial / Product</a>
<a id="Fashion" href="#">Fashion & Glamour</a>
<a id="Invocation" href="#">Invocation</a>
<a id="NewOrleans" href="#">New Orleans</a>
</section>
</nav>
</section>
CSS
/** GLOBAL **/
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color: inherit;
font-size: 16px;
font-style: inherit;
font-weight: 400;
line-height: 1em;
margin: 0 auto;
padding: 0;
position: relative;
text-align: center;
text-decoration: none;
z-index: 1;
}
a {
text-decoration: underline;
}
body {
background-color: #444;
color: #ccc;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: normal;
}
body > section {
background-color: #333;
width: 100%;
max-width: 1440px;
}
/** NAV **/
nav {
align-items: center;
background-color: #222;
display: flex;
flex-flow: column nowrap;
margin-bottom: 10px;
width: 95%;
max-width: 480px;
}
nav a, nav > h2 {
border: 1px solid #666;
margin: 0 0 5px 0;
padding: 5px;
}
nav a {
text-decoration: none;
}
nav > a, nav > h2 {
width: 100%;
}
nav > a {
background-color: #666;
}
nav > div {
display: none;
}
nav > section {
align-items: center;
display: none;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
width: 95%;
}
nav > section.nav {
display: flex;
}
nav > section > a {
display: inline-block;
width: 48%;
}
/** MEDIA QUERIES **/
#media (min-width: 1000px) {
nav {
display: inline-flex;
flex-flow: row nowrap;
width: auto;
max-width: none;
}
nav a {
margin: 0 5px;
width: auto;
}
nav > h2 {
display: none;
}
nav > div {
background-color: #666;
display: block;
height: 20px;
margin: 0 5px;
width:1px;
}
nav > section {
display: flex;
flex-flow: row nowrap;
width: auto;
}
}
Remove width: 48%; rule from nav > section > a.
See codepen.