How to make Bootstrap 4 buttons with hexagonal left & right sides, similar to below image?
Here are answers to a similar question, but copying those styles in Bootstrap 4 (with proper .btn classes) doesn't work properly:
Elongated hexagon shaped button using only one element
As said in a comment by #chriskirknielsen, please understand code first and changes the code by your need.
body {
/* JUST FOR STYLING */
background-color: #3c93af !important;
}
.custom_btn {
position: relative;
display: block;
background: transparent;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 20px;
text-decoration: none;
color: #ffdc01;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.custom_btn:hover {
text-decoration: none;
}
.custom_btn:before,
.custom_btn:after {
position: absolute;
content: '';
width: 300px;
left: 0px;
height: 34px;
z-index: -1;
box-sizing: content-box;
}
.custom_btn:before {
transform: perspective(15px) rotateX(3deg);
}
.custom_btn:after {
top: 40px;
transform: perspective(15px) rotateX(-3deg);
}
.custom_btn.custom_btn--border:before,
.custom_btn.custom_btn--border:after {
border: 4px solid #ffdc01;
}
.custom_btn.custom_btn--border:before {
border-bottom: none;
}
.custom_btn.custom_btn--border:after {
border-top: none;
}
.custom_btn.custom_btn--border:hover:before,
.custom_btn.custom_btn--border:hover:after {
background: #ffdc01;
}
.custom_btn.custom_btn--border:hover {
color: #fff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
Click me!
Related
I have the following css file
body {
font-family: Baskerville;
background: #ecf0f1;
color: #2c3e50;
}
h1 {
margin: 16px 0;
padding-left: 16px;
border-left: 5px solid #e74c3c;
font-family: Baskerville;
font-size: 48px;
}
h3 {
margin: 16px 0;
padding-left: 16px;
color: #cccac4;
}
.container1 {
padding: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.container1 .checkbox {
padding: 8px 48px;
margin: 8px;
font-family: Baskerville;
font-size: 25px;
}
input[type="checkbox"]{
display: none;
}
label {
position: relative;
}
label::before {
content: "";
background: url("check-circle.svg");
background-position: center;
background-size: contain;
width: 32px;
height: 32px;
position: absolute;
left: -44px;
top: -8px;
transform: scale(0) rotateZ(180deg);
transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}
input[type="checkbox"]:checked + label::before {
transform: scale(1.0) rotateZ(0deg);
}
label::after {
content: "";
border: 2px solid #27ae60;
width: 24px;
height: 24px;
position: absolute;
left: -42px;
top: 1px;
border-radius: 50%;
}
This is a simple transform and transition where i rotate the img (check-circle.svg) in those 4 curve points of cubic-bezier , whenever it is checked or unchecked after. However the transition and transformation wont work. It will simply not show. Where am i mistaken ?
Are you sure you've placed <label>...</label> immediately after <input type="checkbox"/>? Code seems fine, although I'm not sure what is the purpose of input[type="checkbox"]{ display: none; }. Posting html would be nice too.
Also you can check if provided svg's url is correct. Try to replace it with some other svg url found on internet.
make sure that (label) is a direct next child of (input)
I'm having a bit of a problem with my CSS code in my website project. I was designing a html form but when i applied the changes in the stylesheet file, the new text colors did not want to be applied etc. And i also added a specific color to this * in the code below but it did not want to change the color either.
.apply {
width: 320px;
height: 420px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
.apply input[type="text"], [type="text"], [type="email"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
h1 .pageHeader {
margin: 0;
padding: 0 0 20;
text-align: center;
font-size: 22px;
color: #fff;
}
body {
background-color: #24252A;
font-family: "Montserrat", sans-serif;
}
.required {
color: rgb(255,99,71);
}
text in your input will have given color only when this input have some value.
Without value there is displayed placeholder text which have his own styling.
look for ::placeholder pseudo element
input::placeholder {
color: red
}
<input placeholder="Type here...">
I am currently trying to write a project and I have a problem that the main page of the application looks different on screens of different sizes. Is it possible to somehow achieve that it looks the same on all screens using CSS, or do I need to do responsive web design? I added 2 examples and the css code below.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-image: url("plant.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
.login-box p {
color: grey;
font-size: 45px;
left: 50%;
}
.login-box {
width: 280px;
position: absolute;
border-left-color: green;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: grey;
}
.login-box h1 {
float: inside;
font-size: 39px;
border-bottom: 4px solid #4caf50;
margin-bottom: 10px;
padding: 13px 0;
}
.h2 {
top: 50%;
left: 50%;
}
.textbox {
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
border-bottom: 1px solid #4caf50;
}
.textbox input {
border: none;
outline: #4caf50;
background: none;
font-size: 12px;
color: white;
width: 80px;
float: left;
margin: 10px;
}
.btn {
width: 100%;
background: none;
border: 2px solid green;
color: grey;
padding: 5px;
font-size: 20px;
cursor: pointer;
margin: 12px 0;
}
.btnNoAccount {
width: 30%;
background: none;
border: none;
color: grey;
padding: 5px;
font-size: 12px;
cursor: pointer;
margin: 12px 0;
float: right;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem;
left: 42%;
color: grey;
margin: auto;
word-spacing: 10px;
}
Using JavaScript, we can test the width of the window and change the active CSS file accordingly. This will work across all browsers. You can have an ID for a element like any other, so let’s add that:
<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />
Then we can use that as a hook and change the href value of the stylesheet. The browser will see that change and unapply the old CSS and reapply the newly linked CSS. We’ll run our little adjustment test once right away, and then anytime the window is resized thereafter.
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if (width < 900) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
You can User Media Query Like This Below Learn More about Media Query in w3schools.com
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
#media only screen and (max-width: 1100px) {
body {
background-color: gray;
}
}
So I am trying to put a background image and then center the text to it, but when I change the screen size the text misaligns and moves to the top.
Here's my code:
import React from "react";
import UniversalValues from "../constants.js";
export default function Body() {
return (
<div>
<div className="Container">
<img
className="ResizeImage"
src="https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
alt="Background not loading! X_X"
/>
<div className="TextField">
<h1 className="BGH1">WE DO IT TOGETHER</h1>
<h1 className="BGH1">SO LET'S CREATE</h1>
</div>
</div>
</div>
);
}
Here is my css file:
.App {
font-family: sans-serif;
text-align: center;
}
.BGH1 {
letter-spacing: 0.06em;
font-family: "Cinzel", serif;
font-size: 5rem;
position: relative;
}
.BrandPoint {
font-size: 3rem;
font-family: "Cinzel", serif;
padding-left: 3rem;
}
.Container {
position: relative;
}
.dropbtn {
background: transparent;
color: white;
padding-bottom: 10px;
font-size: 1.2rem;
font-weight: bold;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #33393f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
.HeaderElem {
color: white;
padding-bottom: 10px;
font-size: 1.2rem;
}
.HeaderElem:hover {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
.HeaderSeperator {
padding-left: 2rem;
}
.HeadUp {
position: fixed;
top: 0;
left: 0;
}
.ResizeImage {
height: auto;
width: 100%;
margin: 0;
padding: 0;
opacity: 0.99;
}
.TextField {
position: absolute;
bottom: 40%;
left: 35%;
color: white;
padding-left: 20px;
padding-right: 20px;
}
What I am getting vs What I wanted:
I want to pack this whole thing together and so it could just effectively change its shape according to the screen size. I have used Bootstrap but I am new to React and designing my entire website on codesandbox.io. Do let me know the best way to do so.
Thanks in advance.
I think your problem is purely HTML/CSS and not so much React. Thanks for flexbox centering content got a lot easier today.
Change your HTML like this:
<div>
<div class="Container">
<div class="imageContainer"></div>
<div class="TextField">
<h1 class="BGH1">WE DO IT TOGETHER</h1>
<h1 class="BGH1">SO LET'S CREATE</h1>
</div>
</div>
</div>
And your CSS like this:
.Container {
display: flex;
justify-content: center;
align-items: center;
background-color:blue;
position: relative;
color: white;
text-align: center;
height: 300px;
}
.imageContainer {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
background-position: center center;
}
Here is a fiddle test it: https://jsfiddle.net/gtqna9c1/7/
How it works
Instead of trying to center changing text by absolute positioning it is a lot easier to create conditions where the text is always centered, no matter what. The background image is now a simple background of a div that is covering your whole box.
The fiddle is simplified and coloured for clarity. Feel free to add paddings etc. as you wish.
I have the following Jade / HTML:
a.service.comparison(ng-href="...")
.icon
i.far.fa-map-signs
.content
span.d-block.title Compare energy deals
span.text Looking for a better energy deal?
.arrow
button.btn(type="button")
i.fas.fa-chevron-circle-right
And Less / CSS:
.service {
color: #grey-dark;
display: flex;
margin: 0 auto 15px;
max-width: 100%;
.icon {
border: 1px solid #ccc;
border-right: none;
border-radius: 2px 0 0 2px;
font-size: 28px;
padding: 10px 15px;
i {
position: relative;
top: 50%;
text-align: center;
.transform(translateY(-70%));
width: 40px;
}
}
.content {
border: 1px solid #ccc;
border-right: none;
flex-grow: 1;
padding: 15px;
.title {
color: #green-medium;
font-size: 17px;
}
}
.arrow {
min-height: 100%;
.btn {
background: #green-medium;
border-radius: 0 3px 3px 0;
color: white;
padding: 0;
width: 35px;
height: 100%;
i {
position: relative;
top: 50%;
.transform(translateY(20%));
vertical-align: top;
}
}
}
}
It looks nice on all Browsers, the left icon is in centre and the right green button has a 100% height and fill the box... Unfortunately on iOS Safari it looks differently: the left icon is on top and the right button doesn't fill the entire box height as you can see in the image below.
Does anyone know how can I fix this? Thanks!
EDIT:
Transform Mixin:
.transform(#string){
-webkit-transform: #string;
-moz-transform: #string;
-ms-transform: #string;
-o-transform: #string;
transform: #string;
}