We Keep Coding

How can i close this navbar when user clicks a link on mobile view?

The navbar is not closing when a user clicks on links to navigate through website?
I had tried to add a click event listener to every link to close navbar but it didn't work!
Also the hamberberger menu icon in active position i.e. X is not aligned well. But the major preblem is to collapse the navbar when clicked.
$(document).ready(function() {
$('.container').click(function() {
$('.navbar .menu').toggleClass("active");
});
});
function myFunction(x) {
x.classList.toggle("change");
}
#media (max-width: 1104px) {
.about .about-content .left img {
height: 350px;
width: 350px;
}
}
#media (max-width: 991px) {
.max-width {
padding: 0 50px;
}
}
#media (max-width: 947px) {
.menu-btn {
display: block;
z-index: 999;
}
/* .menu-btn i.active:before {
content: "\f00d";
} */
.navbar .menu {
position: fixed;
height: 100vh;
width: 100%;
left: -100%;
top: 0;
background: #111;
text-align: center;
padding-top: 80px;
transition: all 0.3s ease;
}
.navbar .menu.active {
left: 0;
}
.navbar .menu li {
display: block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: inline-block;
margin: 20px 0;
font-size: 25px;
}
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: 'Ubuntu', sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: crimson;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
position: relative;
color: #fff;
font-size: 35px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
border: 3px solid #fff;
padding: 0px 10px;
text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
letter-spacing: 2px;
}
.navbar .logo a::after {
content: 'PANDEY';
position: absolute;
font-size: 15px;
font-weight: bold;
bottom: -12px;
/* color: crimson; */
right: 15px;
background: crimson;
border-radius: 5px;
/* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
padding: 0px 4px;
letter-spacing: 2px;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.navbar.sticky .logo a::after {
border-radius: 4px;
background: #fff;
color: crimson;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}
.container {
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
.bar1 {
width: 35px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar2 {
width: 25px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.bar3 {
width: 15px;
height: 3px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -6px) rotate(40deg);
width: 35px;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
font-family: 'Josefin Sans', sans-serif;
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
position: relative;
color: #fff;
}
.navbar.sticky .menu li a:hover {
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1 /jquery.min.js"></script>
<nav class="navbar">
<div class="max-width">
<div class="logo">Chhailbihari</div>
<ul class="menu">
<li class="menu-btn">Home</li>
<li class="menu-btn">About</li>
<li class="menu-btn">Services</li>
<li class="menu-btn">Skills</li>
<li class="menu-btn">Contact</li>
</ul>
<div class="menu-btn">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</nav>

i think you have make menu which is responsive - i.e. works on mobile also.
for this use #media screen css
show hamburger icon when width of window is like tab or mobile else hide this icon.
in menu div (mobile or tab) add close icon to close menu.
hope this solution helps
you may refer below code for navbar for mobile view with hamburger icon.
body
{
margin: 0;
padding: 0;
background: blue;
color: #cdcdcd;
}
#togglmenu
{
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#togglmenu a
{
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#togglmenu a:hover
{
color: tomato;
}
#togglmenu input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
#togglmenu span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#togglmenu span:first-child
{
transform-origin: 0% 0%;
}
#togglmenu span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#togglmenu input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#togglmenu input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#togglmenu input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
#togglmenu input:checked ~ ul
{
transform: none;
}
<nav role="navigation">
<div id="togglmenu">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Info</li>
<li>Contact</li>
</ul>
</div>
</nav>

How to move an element on the opposite side? html,css,js

I have the following code:
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("margin-left", "0px");
$("#plus").css("margin-left", "-425px");
});
$("#close").click(function() {
$("#popUp").css("margin-left", "-425px");
$("#plus").css("margin-left", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
margin-left: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
margin-left: -425px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
left: 4px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-left: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
margin-left: -425px;
}
#plus {
margin-left: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>
How would I move the to the opposite side of the page? Instead of it appearing at the far left of the page, how would I make it appear at the far right? I have tried changing the margin-left in the js but I am not quite getting it right, as it does not output the expected output. Any suggestions?

When using fixed positioning of elements, I advise you to use the right / left rule for offset.
In jquery I changed all margin-left to right. I did the same in css. It was with those rules that dealt with displacement. Also, to rotate the triangle, I adopted rule border-right: 55px solid #1c8dc4 for #plus::after.
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >= 150) {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
}
});
$("#plus").click(function() {
$("#popUp").css("right", "0px");
$("#plus").css("right", "-425px");
});
$("#close").click(function() {
$("#popUp").css("right", "-425px");
$("#plus").css("right", "0px");
});
* {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
}
#darkBack {
width: 100%;
height: 100vh;
background: rgba(76, 56, 75, .15);
}
#popUp {
position: fixed;
max-width: 350px;
height: 225px;
background: rgba(236, 240, 241, 1);
border: 7px solid #fff;
bottom: 0;
right: -425px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#new span {
background: #fff;
position: absolute;
color: #1c8dc4;
padding: 4px 10px;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
margin-top: -5px;
}
#popUp .close {
color: #464646;
right: 8px;
top: 0px;
position: absolute;
font-size: 20px;
cursor: pointer;
}
#popUp h2 {
font-size: 17px;
color: #464646;
line-height: 24px;
font-weight: 400;
text-align: center;
margin-top: 40px;
padding: 0 20px;
}
#body {
height: 1200px;
background: #eee;
}
a.button {
margin: 0 auto;
text-align: center;
right: 0;
left: 0;
position: absolute;
width: 120px;
font-size: 15px;
color: #fff;
border-bottom: 2px solid #18729f;
background: #1c8dc4;
border-radius: 4px;
padding: 8px 0;
}
#plus {
position: fixed;
color: #fff;
bottom: 15%;
font-size: 15px;
right: 0px;
-webkit-transition: all 1.25s ease;
-moz-transition: all 1.25s ease;
-o-transition: all 1.25s ease;
transition: all 1.25s ease;
cursor: pointer;
text-align: left;
letter-spacing: 1px;
}
#plus span {
position: absolute;
margin-top: 38px;
right: 2px;
}
#plus::after {
content: '';
display: block;
display: relative;
border-top: 55px solid transparent;
border-bottom: 55px solid transparent;
border-right: 55px solid #1c8dc4;
}
#media all and (max-width: 900px) {
#popUp {
right: -425px;
}
#plus {
right: 0px;
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div id="popUp">
<div id="close" class="close"><i class="fa fa-times"></i></div>
<div id="new"><span>NEW!</span></div>
<h2>I'm a notification popup that isn't too distracting or in your face. Scroll down or close me and I will go away. You'll still be able to open me later on don't worry.</h2>
<br>
Visit Page
</div>
<div id="plus"><span>NEW<br> <i class="fa fa-plus"></i></span></div>
<div id="body"></div>

Button with hidden input

I want to create a button with a hidden input that activates once the button was pressed.
I made demo but in this demo input animated via changing width and padding which is not good.
So is there any better way to animate this button?
HTML:
<div class="button-wrap">
<label>Max score</label>
<input>
</div>
CSS:
.button-wrap {
display: flex;
height: var(--height);
outline: none;
--height: 20px;
--padding: 5px;
--background: #454555;
--background-active: #46467c;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 30px;
--text-color: #eee;
}
input, label {
height: auto;
transition: .3s;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: inline;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
}
input {
padding: var(--padding) 0;
border: none;
width: 0;
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background-active);
padding: var(--padding);
}
Attribute 'active' is added by js after the button was pressed.
And there is the demo:

function myFunction(e) {
e.toggleAttribute("active").toggle;
}
.button-wrap {
display: flex;
outline: none;
--height: 20px;
--padding: 5px;
--background: #47478d;
--background-active: #46464f;
--background-hover: #46467c;
--separator: #565666;
--radius: 5px;
--input-width: 40px;
--text-color: #eee;
width: 250px;
height: 40px;
background:#34344d;
padding:15px;
}
input, label {
height: auto;
outline: 0;
color: var(--text-color);
text-align: center;
}
label {
display: flex;
width: 100%;
padding: var(--padding);
border-radius: var(--radius);
background-color: var(--background);
border-color: var(--separator);
transition: border-radius .5s;
user-select: none;
text-align: center;
align-items:center;
justify-content:center;
}
input {
padding: var(--padding);
border: none;
width: calc(var(--input-width) - 2 * var(--padding));
background-color: var(--background);
border-radius: 0 var(--radius) var(--radius) 0;
overflow: hidden;
display: none;
opacity: 0;
transition: display 0ms 400ms, opacity 400ms 0ms;
}
.button-wrap:hover label,
.button-wrap:hover input {
background-color: var(--background-hover);
}
.button-wrap[active] label {
border-radius: var(--radius) 0 0 var(--radius);
background-color: var(--background-active);
border-color: var(--separator);
border-right: 2px solid var(--separator);
transition: border-radius .3s;
}
.button-wrap[active] input {
background-color: var(--background-active);
padding: var(--padding);
color:#fff;
opacity: 1;
display:block;
transition: display 0ms 0ms, opacity 600ms 0ms;
}
<div class="button-wrap" onclick="myFunction(this)">
<label>Max score</label>
<input type="text" value="100">
</div>

So there's the answer that my teacher came up with.
HTML
<div class='button-wrap'>
<label>Max count</label>
<input>
</div>
CSS
.button-wrap {
width: 200px;
contain: content;
overflow: hidden;
border-radius: 5px;
position: relative;
outline: none;
height: 30px;
line-height: 20px;
background: #454555;
--input-width: 32px;
}
.button-wrap[active] {
background-color: #46467c;
}
.button-wrap:hover {
background-color: #46467c;
}
input, label {
height: 100%;
display: block;
box-sizing: border-box;
transition: transform .3s;
appearance: none;
outline: 0;
color: #eee;
border: none;
text-align: center;
background: transparent;
padding: 5px;
}
label {
width: 100%;
user-select: none;
}
input {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #565666;
width: var(--input-width);
transform: translateX(var(--input-width));
}
.button-wrap[active] label {
transform: translateX(calc(-1 * var(--input-width) / 2));
}
.button-wrap[active] input {
transform: translateX(0);
}
Here's the demo

Radio buttons validation while clicking on "continue" button Javascript

I have create a template containing 4 radio buttons and 1 "continue" button with effects as shown below
I am trying to add a javascript code while clicking on "continue" :
if any radio button is selected it will pop up an alert that you need to select one buton
if radio 1 is selected, it will open the page choice1.php, if radio 2 is selected then it will open the page choice2.php and so on...
I was following some tutorials and test it on basic examples, it works for me but usually I see
<form onsubmit="return validateSubmit();" action="#">
and
<input type="submit" value="Submit">
When i change my button to submit type i lose the effect i added with css.
Here is my code snippet
#import url('https://fonts.googleapis.com/css?family=Lato');
.container{
font-family: 'Lato', sans-serif;
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h1 {
color: #000000;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #696969;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #1E90FF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #696969;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #1E90FF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #1E90FF;
}
input[type=radio]:checked ~ .check::before{
background: #1E90FF;
}
input[type=radio]:checked ~ label{
color: #1E90FF;
}
#import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
.flex {
font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: #1E90FF;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn:hover {
color: #FFF;
}
a.bttn:focus {
color: #FFF;
}
.bttn {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #1E90FF;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #1E90FF;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
a.bttn{
top: -110px;
}
<div class="container">
<h1 lign="center">Select the Type :</h1>
<br/>
<ul>
<li>
<input type="radio" id="f-option" name="selector">
<label for="f-option">Shipment</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" name="selector">
<label for="s-option">Canceled</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" name="selector">
<label for="t-option">Ordered</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="u-option" name="selector">
<label for="u-option">Other</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="flex">
<a class="bttn" >Continue</a>
</div>
can anyone help me please how to keep the same design of "continue" button and add to it the javascript part.
Thank you very much.

If you just want to switch to a different page instead of submitting a form you can simply perform a check for the value of the radio button and then redirect to the specific page directly like this:
When you uncomment the window.location.href line you would be redirected to the file that you see in the console output.
$(function(){
$('.bttn').on('click', function(){
if($('input[name="selector"]').groupVal() === undefined){
alert('Please select an option!');
} else {
console.log('choice' + $('input[name="selector"]').groupVal() + '.php');
//window.location.href = 'order' + $('input[name="selector"]').groupVal() + '.php';
}
});
});
jQuery.fn.extend({
groupVal: function() {
return $(this).filter(':checked').val();
}
});
#import url('https://fonts.googleapis.com/css?family=Lato');
.container{
font-family: 'Lato', sans-serif;
display: block;
position: relative;
margin: 40px auto;
height: auto;
width: 500px;
padding: 20px;
}
h1 {
color: #000000;
}
.container ul{
list-style: none;
margin: 0;
padding: 0;
overflow: auto;
}
ul li{
color: #696969;
display: block;
position: relative;
float: left;
width: 100%;
height: 100px;
border-bottom: 1px solid #333;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #1E90FF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #696969;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #1E90FF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked ~ .check {
border: 5px solid #1E90FF;
}
input[type=radio]:checked ~ .check::before{
background: #1E90FF;
}
input[type=radio]:checked ~ label{
color: #1E90FF;
}
#import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700";
.flex {
font-family: "Source Sans Pro", sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
a.bttn {
color: #1E90FF;
text-decoration: none;
-webkit-transition: 0.3s all ease;
transition: 0.3s ease all;
}
a.bttn:hover {
color: #FFF;
}
a.bttn:focus {
color: #FFF;
}
.bttn {
font-size: 18px;
letter-spacing: 2px;
text-transform: uppercase;
display: inline-block;
text-align: center;
width: 270px;
font-weight: bold;
padding: 14px 0px;
border: 3px solid #1E90FF;
border-radius: 2px;
position: relative;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1);
}
.bttn:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
position: absolute;
top: 0;
left: 50%;
right: 50%;
bottom: 0;
opacity: 0;
content: '';
background-color: #1E90FF;
z-index: -2;
}
.bttn:hover:before {
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
.bttn:focus:before {
transition: 0.5s all ease;
left: 0;
right: 0;
opacity: 1;
}
a.bttn{
top: -110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 lign="center">Select the Type :</h1>
<br>
<ul>
<li>
<input type="radio" id="f-option" value="1" name="selector">
<label for="f-option">Shipment</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="s-option" value="2" name="selector">
<label for="s-option">Canceled</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="t-option" value="3" name="selector">
<label for="t-option">Ordered</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="u-option" value="4" name="selector">
<label for="u-option">Other</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="flex">
<a class="bttn" >Continue</a>
</div>

CSS Vertical Button with vertical text

I need vertical button with written vertical text inside. It should not be turned to 90 degree. I need to add some hover effect to right side if mouse on it and give white space between words. I have tried white-space and word-space but it did not help.
Example:
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.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;
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<button class="button" style="width:60px; height:600px; text-align:center;"><div style="width: 1ch; text-align:center; font: Consolas, Monaco, monospace;font-size:14pt; word-wrap: break-word;white-spacing: 3 px;">Online Sürücü Sifariş Et</div></button>

You can use transform:rotate(-90deg);
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
.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;
}
<button class="button" style=" text-align:center;">Online Sürücü Sifariş Et</button>

.button {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}

I think this is what you want. The button is a vertical button and the text is all one letter below the next. I have used <br> tags for every new line. Have a look
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.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;
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<button class="button" style="width:60px; height:600px; text-align:center;"><div style="width: 1ch; text-align:center; font: Consolas, Monaco, monospace;font-size:14pt; word-wrap: break-word;white-spacing: 3 px;">O<br>n<br>l<br>i<br>n<br>e<br><br>S<br>ü<br>r<br>ü<br>c<br>ü<br><br>S<br>i<br>f<br>a<br>r<br>i<br>ş<br><br>E<br>t<br></div></button>

There are several ways to accomplish what you're doing, but I like this one:
https://codepen.io/krabbypattified/pen/ybzway
It's a weird CSS attribute, but the imporant code is: white-space: pre-line;
Edit: there's also text-orientation, but that's not supported by many browsers.
Edit: updated the CodePen html