Aligning three button in a form

Aligning three button in a form - html

I'm trying to align three buttons inside a form, but the central one is always fixed at the bottom.
jsfiddle sketch
---HTML---
<form action="view.php" method="GET">
<button class="option delete-option" type="button"></button>
<button class="btn" type="submit">59752fbd5f346</button>
<button class="option edit-option" type="button"></button>
</form>
---CSS---
.btn {
font-family: 'Arima Madurai', cursive;
background-color: Transparent;
color: black;
cursor: pointer;
font-size: 16px;
max-width: 300px;
position: relative;
width: 100%;
border: 1px solid;
overflow: hidden;
}
.btn span {
font-family: 'Arima Madurai', cursive;
}
.btn:after {
background: red;
content: "";
height: 155px;
left: -75px;
opacity: .2;
position: absolute;
top: -50px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: -10;
}
.btn:hover:after {
left: 120%;
-webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
}
.option{
opacity: 0.5;
transition: 200ms;
width: 32px;
height: 32px;
border: 0;
position: relative;
}
.option:hover{
opacity: 1;
}
.delete-option{
background: url("http://icons.iconarchive.com/icons/awicons/vista-artistic/32/delete-icon.png") no-repeat scroll 0 0 transparent;
}
.edit-option{
background: url("http://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/32/edit-icon.png") no-repeat scroll 0 0 transparent;
}
I noticed also that opening the Page from Mozilla, the central button seems to be fixed at the top.

You can make the form a flexbox:
form {
display: flex;
justify-content: space-between;
width: 70%; /* just for demo */
}
.delete-option {
background: url(http://icons.iconarchive.com/icons/awicons/vista-artistic/32/delete-icon.png) no-repeat scroll 0 0 transparent;
}
.btn {
font-family: 'Arima Madurai', cursive;
background-color: Transparent;
color: black;
cursor: pointer;
font-size: 16px;
max-width: 300px;
position: relative;
width: 100%;
border: 1px solid;
overflow: hidden;
}
.edit-option {
background: url(http://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/32/edit-icon.png) no-repeat scroll 0 0 transparent;
}
.option {
opacity: 0.5;
transition: 200ms;
width: 32px;
height: 32px;
border: 0;
position: relative;
}
<form action="view.php" method="GET">
<button class="option delete-option" type="button"></button>
<button class="btn" type="submit">59752fbd5f346</button>
<button class="option edit-option" type="button"></button>
</form>

Use Vertical-align:middle; property
Try this
.option,.btn{
vertical-align:middle;
}
Link for Reference

Related

my button pop-up keeps pushing the page to top when i close it

Hi I'm trying to make a simple text pop-up button using just html and CSS. I looked at a bunch of examples but most of them use JavaScript in some way so I cant use them. found some that is pure CSS but when I tried them, they all do this weird thing where closing the pop-up brings me to top of page. Any help is appreciated. Thanks
jsfiddle: http://jsfiddle.net/hjrudc5n/
This is my HTML
```
<div class="box"><a class="button" href="#popup1">Show Overlay</a></div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">Content</div>
</div>
</div>
</div>
and this is my CSS
/*pop up overlay */
.box {
width: 20%;
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 blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.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: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}

Check this out:
http://jsfiddle.net/aj43psdw/13/
The problem with your code was that using "#" as an href will always take you to the top of the page, no matter what. Also, makes thing hard to control.
What you can do. is work with labels and checkboxes, and control the "state" of things via that.
Like this:
[name="popup"]{
width:0;
height:0;
overflow:hidden;
position:relative;
z-index:-1;
pointer-events:none;
}
[name="popup"]:checked ~ .overlay{
visibility: visible;
opacity: 1;
}
In the fiddle I linked you, clicking the button will check the checkbox, that we'll show via css. the X button will do the same, unchecking it.

It was because of href="#" of the anchor tag you were using, which led to going to top of page on closing the popup.
A workaround is to use <input type="checkbox" /> (so that you can use :checked selector) along with <label>(so that you can still interact with checkbox after hiding it), to hide, and unhide the popup.
/*pop up overlay */
.box {
width: 20%;
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 blue;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: blue;
}
.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;
}
#pop:checked + .overlay {
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: orange;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#pop{
display: none; /*Hide the checkbox*/
}
<div class="box"><label class="button" for="pop">Show Overlay</label></div>
<input type="checkbox" id="pop" />
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<label class="close" for="pop">×</label>
<div class="content">Content</div>
</div>
</div>

Show Div When Click Check-box Radio

As you can see in the title I want to show Divs related to my check-box radio button. I looked for past topics about that and I try to do it with some scripts but I failed. I know Im missing somethings.
What I want to do is; when click on Second button (check-box radio tool 2) I want to open div class row3. and When click on First button (check-box radio tool 1) I want to open div class row2.
Maybe it is so easy but Im new on this stuffs. Any help or sugestion would be great.
Thanks..
/* PRODUCTS AND BUTTONS */
.button {
position: absolute;
bottom: 0%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #d8d8d8cc;
color: rgb(0, 0, 0);
font-size: 70%;
width: 70%;
height: 20%;;
border: none;
cursor: pointer;
border-radius: 7px;
text-align: center;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.container2 {
position: relative;
width: 100%;
max-width: 400px;
}
.container2 img {
width: 100%;
height: auto;
border-radius: 10px;
}
.container2 img {
width: 100%;
height: auto;
border-radius: 10px;
}
.column2 {
float: center;
width: 2300%;
padding:8px;
}
.row2 {
width: 80%;
padding:5px;
position: relative;
left: 23%;
bottom: 5%;
margin-top:5%;
}
/* Clearfix (clear floats) */
.row2::after {
content: "";
clear: both;
display: table;
}
.row3 {
width: 80%;
padding:5px;
position: relative;
left: 23%;
bottom: 5%;
margin-top:5%;
}
/* Clearfix (clear floats) */
.row3::after {
content: "";
clear: both;
display: table;
}
*:focus {
outline: 0 !important;
}
/* PRODUCTS AND BUTTONS END */
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: rgb(240, 240, 240);
}
/* Control the right side */
.right {
right: 0;
background-color: rgb(255, 255, 255);
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered2 {
position: fixed;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
/* Please ❤ this if you like it! */
#import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
:root {
--white: #ffffff;
--light: #f0eff3;
--black: #000000;
--dark-blue: #ffffff;
--dark-light: #ffffff;
--red: #d8d8d8;
--yellow: #d8d8d8;
--grey: #ecedf3;
}
/* #Primary
================================================== */
body{
width: 100%;
background: var(--dark-blue);
overflow-x: hidden;
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
p{
font-family: 'Poppins', sans-serif;
font-size: 17px;
line-height: 30px;
color: var(--white);
letter-spacing: 1px;
font-weight: 500;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
::selection {
color: var(--white);
background-color: var(--black);
}
::-moz-selection {
color: var(--white);
background-color: var(--black);
}
mark{
color: var(--white);
background-color: var(--black);
}
.section {
position: relative;
width: 100%;
}
.over-hide {
overflow: hidden;
}
.z-bigger {
z-index: 100 !important;
}
.background-color{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--dark-blue);
z-index: 1;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:checked ~ .background-color{
background-color: var(--white);
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
position: absolute;
left: -9999px;
width: 0;
height: 0;
visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
position: relative;
width: 70px;
display: inline-block;
padding: 0;
margin: 0 auto;
text-align: center;
margin: 17px 0;
margin-top: 100px;
height: 6px;
border-radius: 4px;
background-image: linear-gradient(298deg, var(--red), var(--yellow));
z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
position: absolute;
font-family: 'unicons';
cursor: pointer;
top: 17px;
z-index: 2;
font-size: 20px;
line-height: 40px;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox:not(:checked) + label:before {
content: '\eac1';
left: 0;
color: var(--grey);
background-color: var(--dark-light);
}
.checkbox:checked + label:before {
content: '\eb8f';
left: 30px;
color: var(--yellow);
background-color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 p{
color: var(--dark-blue);
}
.checkbox-tools:checked + label,
.checkbox-tools:not(:checked) + label{
position: relative;
padding: 15px;
width: 50px;
float: left;
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
margin: 0 auto;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 7px;
overflow: hidden;
cursor: pointer;
text-transform: uppercase;
color: var(--white);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox-tools:not(:checked) + label{
background-color: var(--dark-light);
}
.checkbox-tools:checked + label{
background-color: transparent;
}
.checkbox-tools:not(:checked) + label:hover{
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-tools:checked + label::before,
.checkbox-tools:not(:checked) + label::before{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-image: linear-gradient(298deg, var(--red), var(--yellow));
z-index: -1;
}
.checkbox-tools:checked + label .uil,
.checkbox-tools:not(:checked) + label .uil{
font-size: 24px;
line-height: 24px;
display: block;
padding-bottom: 10px;
}
.checkbox:checked ~ .section .container .row .col-12 .checkbox-tools:not(:checked) + label{
background-color: var(--light);
color: var(--dark-blue);
box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}
.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
position: relative;
display: inline-block;
padding: 0;
padding-top: 20px;
padding-bottom: 20px;
width: 260px;
font-size: 52px;
line-height: 52px;
font-weight: 700;
letter-spacing: 1px;
margin: 0 auto;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
text-transform: uppercase;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-text-stroke: 1px var(--white);
text-stroke: 1px var(--white);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
}
.checkbox-budget:not(:checked) + label{
background-color: var(--dark-light);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
background-color: transparent;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-image: linear-gradient(138deg, var(--red), var(--yellow));
z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
position: relative;
display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
position: absolute;
content: attr(data-hover);
top: 0;
left: 0;
width: 100%;
overflow: hidden;
-webkit-text-stroke: transparent;
text-stroke: transparent;
-webkit-text-fill-color: var(--white);
text-fill-color: var(--white);
color: var(--white);
-webkit-transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
max-height: 0;
}
.checkbox-budget:checked + label span::before{
max-height: 100%;
}
.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
background-color: var(--light);
-webkit-text-stroke: 1px var(--dark-blue);
text-stroke: 1px var(--dark-blue);
box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}
.checkbox-booking:checked + label,
.checkbox-booking:not(:checked) + label{
position: relative;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
text-align: center;
padding: 0;
padding: 6px 25px;
font-size: 14px;
line-height: 30px;
letter-spacing: 1px;
margin: 0 auto;
margin-left: 6px;
margin-right: 6px;
margin-bottom: 16px;
text-align: center;
border-radius: 4px;
cursor: pointer;
color: var(--white);
text-transform: uppercase;
background-color: var(--dark-light);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox-booking:not(:checked) + label::before{
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-booking:checked + label::before{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:not(:checked) + label:hover::before{
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:checked + label::before,
.checkbox-booking:not(:checked) + label::before{
position: absolute;
content: '';
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
border-radius: 4px;
z-index: -2;
background-image: linear-gradient(138deg, var(--red), var(--yellow));
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox-booking:not(:checked) + label::before{
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
}
.checkbox-booking:checked + label::after,
.checkbox-booking:not(:checked) + label::after{
position: absolute;
content: '';
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
border-radius: 4px;
z-index: -2;
background-color: var(--dark-light);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox-booking:checked + label::after{
opacity: 0;
}
.checkbox-booking:checked + label .uil,
.checkbox-booking:not(:checked) + label .uil{
font-size: 20px;
}
.checkbox-booking:checked + label .text,
.checkbox-booking:not(:checked) + label .text{
position: relative;
display: inline-block;
-webkit-transition: opacity 300ms linear;
transition: opacity 300ms linear;
}
.checkbox-booking:checked + label .text{
opacity: 0.6;
}
.checkbox-booking:checked + label .text::after,
.checkbox-booking:not(:checked) + label .text::after{
position: absolute;
content: '';
width: 0;
left: 0;
top: 50%;
margin-top: -1px;
height: 2px;
background-image: linear-gradient(138deg, var(--red), var(--yellow));
z-index: 1;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.checkbox-booking:not(:checked) + label .text::after{
width: 0;
}
.checkbox-booking:checked + label .text::after{
width: 100%;
}
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label{
background-color: var(--light);
color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label::after,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label::after{
background-color: var(--light);
}
.link-to-page {
position: fixed;
top: 30px;
right: 30px;
z-index: 20000;
cursor: pointer;
width: 50px;
}
.link-to-page img{
width: 100%;
height: auto;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="main.js" />
<title>REXIN 3D-AR DEMO</title>
<style>
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split right">
<div class="centered2">
<div class="section over-hide z-bigger">
<input class="checkbox" type="checkbox" name="general" id="general">
<div class="section over-hide z-bigger">
<div class="container pb-5">
<div class="row justify-content-center pb-5">
<div class="col-12 pb-5">
<input class="checkbox-tools" type="radio" name="tools" id="tool-1" checked>
<label class="for-checkbox-tools" for="tool-1">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black.svg" width="100%" height="100%">
</label>
<br>
<input class="checkbox-tools" type="radio" name="tools" id="tool-2">
<label class="for-checkbox-tools" for="tool-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black.svg" width="100%" height="100%">
</label>
<br>
<input class="checkbox-tools" type="radio" name="tools" id="tool-3">
<label class="for-checkbox-tools" for="tool-3">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black.svg" width="100%" height="100%">
</label>
<br>
<input class="checkbox-tools" type="radio" name="tools" id="tool-4">
<label class="for-checkbox-tools" for="tool-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black.svg" width="100%" height="100%">
</label>
<br>
<input class="checkbox-tools" type="radio" name="tools" id="tool-5">
<label class="for-checkbox-tools" for="tool-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Location_dot_black.svg" width="100%" height="100%">
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row2">
<div class="column2">
<div class="container2">
<img src="Assets/photos/terrassen.jpg" alt="Snow" style="width:100%">
<a href="terrassendach.html"> <button class="button" style="vertical-align:top">
<span>Terrassendach </span></button></a>
</div>
</div>
<div class="column2">
<div class="container2">
<img src="Assets/photos/pergolen.jpg" alt="Snow" style="width:100%">
<a href="pergolen.html"> <button class="button" style="vertical-align:top">
<span>Pergolen </span></button></a>
</div>
</div>
<div class="column2">
<div class="container2">
<img src="Assets/photos/carport.jpg" alt="Snow" style="width:100%">
<a href="carport.html"> <button class="button" style="vertical-align:top">
<span>Carport </span></button></a>
</div>
</div>
<div class="column2">
<div class="container2">
<img src="Assets/photos/Vordächer.jpg" alt="Snow" style="width:100%">
<a href="vordacher.html"> <button class="button" style="vertical-align:top">
<span>Vordächer </span></button></a>
</div>
</div>
</div>
<div class="row3">
<div class="column2">
<div class="container2">
<img src="Assets/photos/terrassen.jpg" alt="Snow" style="width:100%">
<a href="terrassendach.html"> <button class="button" style="vertical-align:top">
<span>Terrassendach </span></button></a>
</div>
</div>
<div class="column2">
<div class="container2">
<img src="Assets/photos/pergolen.jpg" alt="Snow" style="width:100%">
<a href="pergolen.html"> <button class="button" style="vertical-align:top">
<span>Pergolen </span></button></a>
</div>
</div>
<div class="column2">
<div class="container2">
<img src="Assets/photos/carport.jpg" alt="Snow" style="width:100%">
<a href="carport.html"> <button class="button" style="vertical-align:top">
<span>Carport </span></button></a>
</div>
</div>
<div class="column2">
<div class="container2">
<img src="Assets/photos/Vordächer.jpg" alt="Snow" style="width:100%">
<a href="vordacher.html"> <button class="button" style="vertical-align:top">
<span>Vordächer </span></button></a>
</div>
</div>
</div>
</div>
</body>

Try this! (Run code snippet to see)
Codepen: https://codepen.io/dhanushbadge/pen/kICBu
Made by: #Dhanush Badge
function show1(){
document.getElementById('div1').style.display ='none';
}
function show2(){
document.getElementById('div1').style.display = 'block';
}
body {
font-family: arial;
}
.hide {
display: none;
}
p {
font-weight: bold;
}
<p>How many check boxes do you want when clicked on a radio button?</p>
<input type="radio" name="tab" value="igotnone" onclick="show1();" />
None
<input type="radio" name="tab" value="igottwo" onclick="show2();" />
Two
<div id="div1" class="hide">
<hr><p>Okay Cool! Here are those two...</p>
<input type="checkbox" value="Yes" name="one">
One
<input type="checkbox" value="Yes" name="two">
Two
</div>

Hover effect on CSS button [duplicate]

This question already has answers here:
Keep the pseudo element in between the background and main content
(1 answer)
Avoid z-index working relative to the parent element
(1 answer)
Closed 4 years ago.
I am trying create a hover effect using CSS. Here is the link: http://creativeartbd.com/demo/test.html
Here is the code:
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
now if you run it you can see that there is style when you hover over the button. Now I want to set initial background for this button. So that IF I set the background here:
button {
background: orange;
}
If I do so then the effect is not showing.
Can you tell me why and how can I solve it?
JSFiddle

add z-index:0 to the element to create a stacking context and keep the pseudo element inside. You can then add background
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
z-index:0;
background:orange;
text-transform: uppercase;
}
button::before,
button::after {
background:red;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: black;
}
/* BUTTON 5 */
.btn-5 {
overflow: hidden;
}
.btn-5::after {
/*background-color: #f00;*/
height: 100%;
left: -35%;
top: 0;
transform: skew(50deg);
transition-duration: 0.6s;
transform-origin: top left;
width: 0;
}
.btn-5:hover:after {
height: 100%;
width: 135%;
}
<button class="btn-5">Button 5</button>
You can also simplify your code like follow:
button {
background: none;
border: 3px solid red;
border-radius: 5px;
color: red;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
background:
linear-gradient(50deg,red 50%,transparent 50.5%),
orange;
background-size:250% 100%;
background-position: right;
text-transform: uppercase;
transition: all 0.5s;
}
button:hover {
color: black;
background-position: left;
}
<button class="btn-5">Button 5</button>

Text is not rotating with button

I need help rotating text at the same time that the button rotates. For some reason the text is currently disappearing when I hover the mouse over the button. The text should not be disappearing; it should be rotating with the button I'm using Chrome for this project.
http://codepen.io/matosmtz/pen/oXBaQE
HTML
<body>
<div class = "container">
<section class="3d-button">
<h2>Animated Button</h2>
<p class="btn_perspective">
<button class="btn btn-3d btn-3da">Submit</button>
</p>
</section>
</div>
</body>
CSS
html, body {
font-size: 100%;
padding: 0;
margin: 0;
height: 100%;
border: 0;
}
body {
font-family: Lekton;
background: rgb(245,245,245);
}
a {
color: #888;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
height: 100%;
background: #fff;
position: relative;
}
.container > section {
margin: 0 auto;
padding: 6em 3em;
text-align: center;
}
h2 {
margin: 20px;
text-align: center;
text-transform:uppercase;
letter-spacing: 1px;
font-size: 2em;
}
.btn {
border:none;
position: relative;
background: rgb(245,245,245);
padding: 15px 40px;
display: inline-block;
text-transform: uppercase;
margin: 15px 30px;
color: inherit;
letter-spacing: 2px;
font-size: .9em;
outline: none;
-webkit-transition: all 0.4s;
transition: all 0.4s;
cursor: pointer;
}
.btn:after {
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.btn_perspective {
-webkit-perspective: 800px;
perspective: 800px;
display: inline-block;
}
.btn-3d {
display: block;
background: #5cbcf6;
color: white;
outline: 1px solid transparent;
transform-style: preserve-3d;
}
.btn-3d:active {
background: #55b7f3;
}
.btn-3da:after {
width: 100%;
height: 42%;
left: 0;
top: -40%;
background: #53a6d7;
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-3da:hover {
transform: rotateX(-45deg);
}

Here's the updated codepen: http://codepen.io/anon/pen/KpaGYd
Added the following code to your button:
.btn-3da:after {
z-index:1;
}
.btn-3da:hover {
position:relative;
z-index:2;
}

You can take a look into this pure CSS3 solution (works in all major web browsers: DEMO):
/*ROTATE*/
.divRotate
{
-moz-transition : all 0.8s;
-webkit-transition : all 0.8s;
-o-transition : all 0.8s;
transition : all 0.8s;
}
.divRotate:hover
{
-moz-transform : rotate(360deg);
-webkit-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
}
Add the div element to your HTML and refer the class = 'divRotate'.
Hope this may help. Best regards,

ERROR in CSS pop up

I have create a pop up using only CSS and HTML it works fine as i need and here is code
.wrap {
padding: 40px;
text-align: center;
}
hr {
clear: both;
margin-top: 40px;
margin-bottom: 40px;
border: 0;
border-top: 1px solid #aaaaaa;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaaaaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eeeeee solid 1px;
text-align: right;
}
<div class="wrap">
pop up!
</div>
<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS?</h2>
×
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="modal-footer">
Nice!
</div>
</div>
</div>
Jsfiddle
My problem is when i click pop up entire page scroll down to bottom and pop up appears
since i have lot of content in my page
i need to open pop up on same place i don't want the page to scroll down can some one help whats wrong
NOTE when you try with the above code you can only find scroll little bit
but in my page it scroll to bottom of page

I don't know if I understand it correctly but try to add sth like that:
body.unscrollable {
overflow:hidden;
}
and add class .unscrollable when modal is open.
It will disable scrolling on website body.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Aligning three button in a form - html

Use Vertical-align:middle; property Try this .option,.btn{ vertical-align:middle; } Link for Reference

Related

my button pop-up keeps pushing the page to top when i close it

Show Div When Click Check-box Radio

Hover effect on CSS button [duplicate]

Text is not rotating with button

ERROR in CSS pop up

Categories

Resources