Sanwebcorner | Programming Blog

How to Create Super Sliding tab using Css and Jquery

This is one of the interesting topic to create a tab section in different manner, Yes today we will see how to create super sliding tab menu with the help of simple css and Jquery. This example is very useful for developers because lot of website contains this types of tab section.

This types of super sliding tab section will reduce the webpage because it shows the specified contents for specified tab menu. When you click another tab menu it gives the relevant content and hides the previous content.

Here to hide and show the content we are using the jquery and java script and also article sliders. For layouts we are using the css code. This example is fully responsive in the mobile view it shows the different slide menu.

Here is the full css and html code for this example. You can download the code and use it for your website. And also have the live demo, check out the live demo to show the result of this example. I hope this is very useful.



Html code for Super Sliding Tab Menu:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Sliding Tab Menu using css and jquery</title>
<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}


ol,
ul {
list-style: none
}

table {
border-collapse: collapse;
border-spacing: 0
}
</style>

<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header>
<h1 style="text-align:center;">Slider Tab:</h1>
</header>
<nav>
<ul>
<li class="gnav1">Tab Menu1</li>
<li class="gnav2">Tab Menu2</li>
<li class="gnav3">Tab Menu3</li>
<li class="gnav4">Tab Menu4</li>
</ul>
</nav>
<div class="contents" id="contents">
<div class="container">
<article id="page1" class="show top">
<section>
<h1>Tab1 Title</h1>
<p>This is tab one.</p>
</section>
</article>
<article id="page2">
<section>
<h1>Tab2 Title</h1>
<p>This is tab two.</p>
</section>
</article>
<article id="page3">
<section>
<h1>Tab3 Title</h1>
<p>This is tab three.</p>
</section>
</article>
<article id="page4">
<section>
<h1>Tab4 Title</h1>
<p>This is tab four.</p>
</section>
</article>
<article id="page5">
<section>
<h1>Tab5 Title</h1>
<p>This is tab five</p>
</section>
</article>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
$(document).ready(function(){
var item_num = $('nav li').length + 1;
var btn_state = true;

$('nav li').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});

$('nav li').on('click',function(){
if(btn_state){
btn_state = !btn_state;
$('nav li').removeClass('currentPage');
$(this).addClass('currentPage');

var i = $('nav li').index(this);
$('article').removeClass('show');
$('article').addClass('hide');
$('article').eq(i).addClass('show');

setTimeout(function(){
btn_state = !btn_state;
},500);
}
});
});
</script>
</body>
</html>

Css code for Super Sliding Tab Menu:

body, html {
  height: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  font-family: 'Cairo', sans-serif;
}



.wrapper {
  width: 100%;
  height: 100%;
  margin: auto;
  border-radius: 8px;
  background: #f0f0f0;
  position: relative;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

header h1 {
    background: #FBB042;
    color: #FFF;
  padding: 1rem;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  position: relative;
  font-size:24px;
  z-index: 8;
}

nav {
  width: 100%;
    background: #FF9800;
}
@media (min-width: 769px) {
  nav {
    float: left;
    width: 127px;
    height: calc(100% - 4.8rem);
    border-radius: 0 0 0 8px;
  }
}
nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 769px) {
  nav ul {
    display: block;
  }
}
nav li {
  line-height: 3;
  padding: 0 1rem;
  border-right: 1px solid #f0f0f0;
  cursor: pointer;
  color: #fff;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  nav li {
    border-bottom: 1px solid #f0f0f0;
    border-right: none;
  }
}
nav li.hover {
  background: rgba(255, 255, 255, 0.2);
}
nav li.pressed {
  background: rgba(255, 255, 255, 0.7);
}
nav li.currentPage {
  background: rgba(255, 255, 255, 0.5);
}

#contents {
  box-sizing: border-box;
  position: absolute;
  height: calc(100% - 6rem);
  width: 100%;
  top: 7.8rem;
  left: 0;
  border-radius: 0 0 8px 0;
  overflow: hidden;
  background: -webkit-linear-gradient(315deg, #FF9800 0%, #FFCC7F 100%);
  background: linear-gradient(135deg, #FF9800 0%, #FFCC7F 100%);

}
@media (min-width: 769px) {
  #contents {
    height: calc(100% - 3rem);
    width: calc(100% - 8rem);
    top: 3rem;
    left: 128px;
  }
}

article {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 2rem;
   background: -webkit-linear-gradient(315deg, #FF9800 0%, #FFCC7F 100%);
  background: linear-gradient(135deg, #FF9800 0%, #FFCC7F 100%);

  top: 0;
  left: -100%;
}
article.hide {
  -webkit-transition: left 0s 0.5s;
  transition: left 0s 0.5s;
}
article:nth-of-type(1) {
  z-index: 5;
}
article:nth-of-type(2) {
  z-index: 4;
}
article:nth-of-type(3) {
  z-index: 3;
}
article:nth-of-type(4) {
  z-index: 2;
}
article:nth-of-type(5) {
  z-index: 1;
}
article.show {
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
  left: 0;
  z-index: 6;
}
article section {
  width: 100%;
  color: #fff;
}
article section h1 {
  font-size: 1.5rem;
  margin: 0 0 2rem 0;
}

Multi Layered image effect on mouse hover with the help of simple css

In this post will tell you how to create multi layered image effect on mouse hover with the help of simple css3 code. And it is also called as a multi layered 3d effect on mouse hover. We have create four different layers with different transform direction to show the layers. And we also set the different opacity of each layers. The first one opacity is 0.4 second one 0.6 and third one 0.8 and final and fourth layer opacity point is 1.0. So this layers view when hover the particular image in different opacity value.


Multi Layered image effect
 The below line shows the 3d layers

.container:hover img:nth-child(4){
transform: translate(160px, -160px);
opacity: 1;
}
.container:hover img:nth-child(3){
transform: translate(120px, -120px);
opacity: 0.8;
}
.container:hover img:nth-child(2){
transform: translate(80px, -80px);
opacity: 0.6;
}
.container:hover img:nth-child(1){
transform: translate(40px, -40px);
opacity: 0.4;
}

I hope this multi layered image 3D effect on mouse hover example will really helpful. It is also looking very nice to see. Here i provided the live demo, please check the live demo to see the multi layered effect. And here have the full code use this code to your projects.

Code for Multi-layered image effect on hover:

<!DOCTYPE html>
<html>
<head>
<title>Multi Layered Effect with CSS3</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.container{
position: relative;
width: 360px;
margin-top: 250px;
background: rgba(0, 0, 0, 1);
background-size: cover;
transform: rotate(-20deg) skew(30deg) scale(0.9);
transition: 0.5s;

}
.container img{
position:  absolute;
width: 300px;
height: 250px;
transition: 0.5s;
cursor:  pointer;
}
.container:hover img:nth-child(4){
transform: translate(160px, -160px);
opacity: 1;
}
.container:hover img:nth-child(3){
transform: translate(120px, -120px);
opacity: 0.8;
}
.container:hover img:nth-child(2){
transform: translate(80px, -80px);
opacity: 0.6;
}
.container:hover img:nth-child(1){
transform: translate(40px, -40px);
opacity: 0.4;
}
</style>


</head>
<body>
<div class="container">
<img src="display-popup-on-page-load.png">
<img src="display-popup-on-page-load.png">
<img src="display-popup-on-page-load.png">
<img src="display-popup-on-page-load.png">
</div>
</body>
</html>

How to Create Animated Background Gradient using simple css3 code

Here we will see how to create animated gradient background for webpage. In this example background changed in gradient color and changed in another gradient color. It turns the gradient when changing the background. The background animation continuously changed. This animation purely done by using the simple css3 code. 

How to animated Background Gradient:

This example changes the background colors you can change the background color based on the given css3 code in body section.
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);




Code for Animated Background Gradient :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Create Animated Background  Gradient using simple css3 </title>
<style>
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}
</style>
</head>
<body>
<h1>Animated Background  Gradient using simple css3</h1>
<h2><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
</body>
</html>

Responsive time-line Vertical Design using simple pure css

Today we will see how to create responsive timeline vertical design using simple css code. This design helps the user to view the post or particular information for that particular time. It is user friendly and easily understand the timeline contents. Here is the example contains the code you can download and use this code. Click the demo link below to visit the result for this example i hope this post is very useful.



Code for Responsive Vertical-Timeline Design:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Responsive Vertical Timeline</title>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Droid+Sans'>
<style>
body {
background-color: #FF9C07;
min-height: 100vh;
margin: 0;
font-family: 'Droid Sans', sans-serif;
}
body:before {
content: '';
position: fixed;
top: 0px;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 4px;
background-color: #fff;
}
body .entries {
width: calc(100% - 80px);
max-width: 800px;
margin: auto;
position: relative;
left: -5px;
}
body .entries .entry {
width: calc(50% - 80px);
float: left;
padding: 20px;
clear: both;
text-align: right;
}
body .entries .entry:not(:first-child) {
margin-top: -60px;
}
body .entries .entry .title {
font-size: 32px;
margin-bottom: 12px;
position: relative;
color: #fff;
}
body .entries .entry .title:before {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 4px solid #ffffff;
background-color: #FF9C07;
border-radius: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: -73px;
z-index: 1000;
}
body .entries .entry .title.big:before {
width: 24px;
height: 24px;
-webkit-transform: translate(8px, -50%);
transform: translate(8px, -50%);
}
body .entries .entry .body {
color: #ffffff;
}
body .entries .entry .body p {
line-height: 1.4em;
}
body .entries .entry:nth-child(2n) {
text-align: left;
float: right;
}
body .entries .entry:nth-child(2n) .title:before {
left: -63px;
}
body .entries .entry:nth-child(2n) .title.big:before {
-webkit-transform: translate(-8px, -50%);
transform: translate(-8px, -50%);
}

</style>
</head>
<body>
<div class="entries">
<div class="entry">
<div class="title">2011</div>
<div class="body">
<p>How to create time line vertical design.</p>
</div>
</div>
<div class="entry">
<div class="title">2012</div>
<div class="body">
<p>time-line Vertical Design</p>
</div>
</div>
<div class="entry">
<div class="title big">2013</div>
<div class="body">
<p>How to time line pure css</p>
</div>
</div>
<div class="entry">
<div class="title">2014</div>
<div class="body">
<p>time line pure css - vertical design</p>
</div>
</div>
<div class="entry">
<div class="title">2015</div>
<div class="body">
<p>VAdipisci totam omnis cum et suscipit excepturi et excepturi. Inventore sequi sit ut aliquid. Modi aut dolores dignissimos.</p>
<p>Delectus facere officia consequuntur molestias deserunt illo. Placeat laudantium beatae natus excepturi ab nihil voluptates.</p>
</div>
</div>
<div class="entry">
<div class="title big">2016</div>
<div class="body">
<p>Impedit dolorem commodi explicabo fugit aut alias voluptatem. Magnam earum rerum quae dicta quibusdam aliquam ut.</p>
</div>
</div>
<div class="entry">
<div class="title">2017</div>
<div class="body">
<p>Responsive  time-line Vertical Design using simple pure css</p>
</div>
</div>
</div>
</body>
</html>

Simple Gradient Background for webpage using css3 code

Today we will see how to create simple gradient background using css3 code. The css3 code allows the linear-gradient attribute to display the gradient background. The below code is the one to display the background gradient.

 background-image: linear-gradient(to bottom right, green, orange);

 Here we can used to bottom right position, it displays gradient from top left to bottom right, You can use the different position like, to left, to right, to bottom, to top, etc... This simple background gradient you can use instead of plain background color for body or any sections. This is very very simple and easy to use, Here is the css code you can use it and also demo link check it out , I hope this is is useful.


Simple Gradient Background for webpage using css3 code

Code for Simple Gradient Background:


<!DOCTYPE html>
<html>
<title>Simple Background Gradient for Website</title>
<head>
<style>
body {
background-image: linear-gradient(to bottom right, green, orange);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:780px;
}
</style>
</head>
<body>
<center>
<h1>Simple Background Gradient for Website</h1>
<p>This linear gradient starts at top left. It starts green, transitioning to orange:</p>
<h1>Simple Background Gradient for Website</h1>
<h2>www.sanwebcorner.com</h2>
</center>
</body>
</html>

Underline Animation Effect on hover the text using simple css

Using css we can animated several things, This is one of the different and interesting thinking to animated text underline bar with gradient with animation effect. Now will see how to create underline animation effect on hover the underline text using css.

In this underline animation the underline bar background gradient moves the left to right with different gradient background colors. You can change the gradient background colors by changing the background color codes in the below example code

background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 

This types of effects is really different thinking. Here is the full code for how to do the underline animation effect on hover the text using the simple css, You can download the full code here to use this underline animation. And also having the demo links to display the result of this example. I hope this example really helpful.

Html code for Underline Animation Effect on hover the text :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Animation Effect on hover the text using simple css</title>
<link rel="stylesheet" href="css/style.css">  
</head>
<body>
<div class="page-example">
<a href="http://www.sanwebcorner.com" target="_blank">Underline Gradient Animation Effect<br/></a>
</div>
<br/> <br/>
<div class="page-example">
<a href="http://www.sanwebcorner.com" target="_blank">Underline Gradient Animation Effect on hover<br/></a>
<br/><br/>
</div>

<div class="page-example">
<h2><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
<br/><br/>
</div>
</body>
</html>

Css Code for Underline Animation Effect on hover the text :

html{

line-height: 1.15;
}

a {
color: transparent;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
text-shadow: 0 0 #141414, 0.08em 0 0 #fff, 0 0, -0.08em 0 0 #fff;
vertical-align: bottom;
}
a:after {
background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 5px no-repeat;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 400%;
will-change: transform;
z-index: -1;
}
a:hover:after {
-webkit-animation: underline-gradient 6s linear infinite;
animation: underline-gradient 6s linear infinite;
background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
}

@-webkit-keyframes underline-gradient {
0% {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-75%, 0%, 0);
transform: translate3d(-75%, 0%, 0);
}
}

@keyframes underline-gradient {
0% {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-75%, 0%, 0);
transform: translate3d(-75%, 0%, 0);
}
}
/* page layout */
html,
body {
height: 90%;
}


.page-example {
font-size: 3vw;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}

How to Create 3d text effect using simple css code

Today I will tell you how to create 3d text using simple css3 code. The 3D Text is used to highlight the text of the heading in the web pages. This is very easy to create the following code is used to create this types of 3D Text.

.a3d_text {
font-size: 75px;
text-transform: uppercase;
color: #673AB7;
text-shadow:
-6px 6px 10px rgba(103, 58, 183, 0.33),
1px -1px 0px rgba(235, 235, 235, 0.75),
2px -2px 0px rgba(215, 215, 215, 0.75),
-1px 1px 0px rgba(160, 160, 160, 0.75),
-2px 2px 0px rgba(190, 190, 190, 0.75),
-3px 3px 0px rgba(200, 200, 200, 1),
-4px 4px 0px rgba(186, 186, 186, 1),
-5px 5px 0px rgba(172, 172, 172, 1),
-6px 6px 0px rgba(158, 158, 158, 1),
-7px 7px 0px rgba(144, 144, 144, 1),
-8px 8px 0px rgba(130, 130, 130, 1),
-7px 7px 15px rgba(0, 0, 0, 0.2),
-7px 7px 18px rgba(0, 0, 0, 0.2),
-7px 7px 20px rgba(0, 0, 0, 0.1),
-6px 8px 20px rgba(0, 0, 0, 1);
}

You can change the 3D text color by changing the color code of color: #673AB7;  This types of 3D texts looks very nice.The text-shadow is the css property is used to give the shadows to the text in 3D effects.Multiple shadows in different positions will give the perfect 3D effects to the text.

In this example i given the css code for 3D text just use this your sites and also check the demo link for live check the result of the example. I hope this will be useful. 





How to Create 3d text effect using simple css code

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Text Effect</title>
<style>
body {
background-color: #eee;
font-family: sans-serif;
text-align: center;
}
.a3d_text {
font-size: 75px;
text-transform: uppercase;
color: #673AB7;
text-shadow:
-6px 6px 10px rgba(103, 58, 183, 0.33),
1px -1px 0px rgba(235, 235, 235, 0.75),
2px -2px 0px rgba(215, 215, 215, 0.75),
-1px 1px 0px rgba(160, 160, 160, 0.75),
-2px 2px 0px rgba(190, 190, 190, 0.75),
-3px 3px 0px rgba(200, 200, 200, 1),
-4px 4px 0px rgba(186, 186, 186, 1),
-5px 5px 0px rgba(172, 172, 172, 1),
-6px 6px 0px rgba(158, 158, 158, 1),
-7px 7px 0px rgba(144, 144, 144, 1),
-8px 8px 0px rgba(130, 130, 130, 1),
-7px 7px 15px rgba(0, 0, 0, 0.2),
-7px 7px 18px rgba(0, 0, 0, 0.2),
-7px 7px 20px rgba(0, 0, 0, 0.1),
-6px 8px 20px rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<h1 class="a3d_text">San Web Corner</h1>
<h3><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a>
</body>
</html> 

Transparent button on Mouse hover effect using css

Transparent button on mouse hover effect is one the simple effect , it is very easy to create using simple css and html code. This types of transparent buttons are commonly used in the websites. It is simply looking nice and attractive.

In this example the transparent button visible when hover the button. First it shows the full background color when you mouse hover it shows only border for the buttons.You can also create this types of button inversion means transparent button on mouse hover it fills the color, you can done this using simple css code.

The below code is used to create the transparent button.

button.green-button:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;

}

Here is the example with the download button, you can download the full code for transparent button just by clicking the download button, you can use it for your websites. And also i provided the Live demo link, you can click and view the demo page.you can able to know how the buttons are working. I hope this simple concept help you lot.


Code for Transparent button on Mouse hover effect using css

<html>
<head>
<title>Transparent button on Mouse hover effect using css</title>
<style>
button.green-button{
padding: 7px 20px !important;
border-radius: 2px;
margin: 0px 0px 0px 20px;
background-color: #1ec279;
border: 2px solid #1ec279;
transition: 0.6s;
}

button.green-button a {
text-decoration: none;
color: #fff;
}

button.green-button:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;

}
button.green-button:hover a{
color: #1ec279;
}
</style>

</head>
<body>
<div class="footer-text-cta">
<p>Do you want offer<button class="green-button"><a href="#" class="manual-optin-trigger">Check Offer</a></button></p>

<p>Do you want offer<button class="green-button"><a href="#" class="manual-optin-trigger">Check Offer</a></button></p>

<h1 style="text-align:center;"><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h1>

</div>
</body>
</html>

customize Upload Button using Pure Css

customize the upload button is one of the important thing, when you use the upload button on your forms. Because the default upload button is not looking good and user friendly but when you can customize the upload button user can easily know the upload button and it is perfectly highlighted.

You can use the <div> before the button and then you just call this class "upload-btn-wrapper" to this div, this class contain some customized css codes, the code is
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}

and you can customize the input field and buttons using the below simple css code, the customized upload buttons will work as a normal upload button but lookwise it will different. Most of the cases will customize the upload buttons in different types of ways. you can also implement drag and drop file customization using jquery.

In this example the upload input field has been customised through the simple css code. Here is the full code you can download and use it to your website/applications. And also i will provided the live demo link you can visit the link, will see the customized upload button. I hope this is very useful, will see another web concept.


Full Code for customize Upload Button:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>customize File Upload Button With Pure CSS</title>
<style>
body{
margin:15em 37em;

}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
border: 1px solid #9B6A20;
    color: #FFFFFF;
    padding: 10px 49px;
    border-radius: 5px;
    font-size: 20px;
    background-color: #EE8E00;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>
</head>
<body>
<div class="upload-btn-wrapper">
<button class="btn"><img src="customized-upload-icon.png" style="width:25px; margin-right:15px; vertical-align: middle;"/>Upload File</button>
<input type="file" name="myfile" />
</div>
</body>
</html>

Simple Activate / De-Activate switch using Simple Css

In this section i want to explain about how to create simple activate deactivate switch using the simple css3. Here we design the buttons with the help of css3. The button design css code is below

.switch {
position: relative;
display: inline-block;
width: 75px;
height: 34px;
}

This code is used to design the button you can change here height and width of the switch / button. Inside the button we have one slider circle the following code is used to create that white circle inside the button.

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}


Normal position of the switch is in red. When you clicked it turns in to green that means active status when you clicked again it turns in red that means de-active status. that will be done below css code.

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: green;
}

This is very useful you can use this activate and deactivate button in several web applications. It is very simple and nice and also you can create this using simple css3 code. Here is the full code available. you can download the code and use it your projects. And also provided demo page, please checkout the demo page then you can know how the buttons are working...

Code for Activate De-Activate Switch :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Simple Activate / De-Activate switch using Simple Css </title>
<style>
.switch {
position: relative;
display: inline-block;
width: 75px;
height: 34px;
}

.switch input {display:none;}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: green;
}

input:focus + .slider {
box-shadow: 0 0 1px green;
}

input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Toggle Switch using simple css</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" >
<span class="slider round"></span>
</label>
</body>
</html>