Sunday 30 April 2017

BUTTON EFFECTS (PART 1)

How can we change different Effects on Button using CSS Classes in 3 different way..........

CODING:-

Styles:-

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                       
<link rel="shortcut icon" href="http://simbyone.com/_assets/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://simbyone.com/_assets/favicon.ico" />
<link rel="icon" href="http://simbyone.com/_assets/favicon.ico" type="image/x-icon" />

    <title>Button Effects</title>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>

<link href="_css/Icomoon/style.css" rel="stylesheet" type="text/css" />
<link href="_css/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="_scripts/jquery-2.1.4.min.js"></script>
<style type="text/css">
    #wrapper {
float: left;
width: 100%;
}
#wrapper-inner{
width: 950px;
margin-right: auto;
margin-left: auto;
}
.wrapper-inner-tab{
float: left;
width: 100%;
margin-top: 125px;
}
.wrapper-inner-tab-title {
width: 100%;
margin-top: 30px;
font-size: 25px;
color: #666666;
float: left;
text-align: center;
margin-bottom: 80px;
}
.wrapper-inner-tab-backgrounds { 
float: left;
margin-left:140px;
height: 300px;
width: 950px;
}
.wrapper-inner-tab-backgrounds-first{
float: left;
margin-left:140px;
height: 300px;
width: 33.33%;
background-color: Coral;
}
.wrapper-inner-tab-backgrounds-second{
float: left;
margin-left:140px;
height: 300px;
width: 33.33%;
background-color:CornflowerBlue;
}
.wrapper-inner-tab-backgrounds-third{
float: left;
margin-left:140px;
height: 300px;
width: 33.33%;
background-color: #4c5f6d;
}
.sim-button{
line-height: 50px;
height: 44px;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 125px;
width: 119%;
cursor: pointer;
}
.button1 {
color:Black;
font-family:Algerian;
font-size:x-large;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
position: relative;
top: 0px;
    left: 0px;
    height: 65px;
    width: 182px;
}
.button1 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}
.button1:hover {
background-color: rgba(255,255,255,0.1);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.button2 
{
    color:Black;
font-family:Algerian;
font-size:x-large;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
position: relative;
overflow: hidden;
    top: -8px;
    left: 0px;
    width: 165px;
    height: 58px;
}
.button2 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}
.button2 span {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.button2:hover{
background-color: rgba(255,255,255,0.2);
}
.button2:hover > span{
opacity: 0;
-webkit-transform: translate(0px,-40px);
transform: translate(0px,-40px);
}
.button2::after{
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
-webkit-transform: translate(0, 30%);
transform: translate(0, 30%);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.button2:hover::after{
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.button3 {
color:Black;
font-family:Algerian;
font-size:x-large;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
position: relative;
overflow: hidden;
    top: -22px;
    left: 0px;
    width: 173px;
    height: 69px;
}
.button3 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}
.button3 span {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.button3:hover{
background-color: rgba(255,255,255,0.2);
}
.button3:hover > span{
opacity: 0;
-webkit-transform: translate(0px,40px);
transform: translate(0px,40px);
}
.button3::after{
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
-webkit-transform: translate(-30%, 0);
transform: translate(-30%, 0);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.button3:hover::after{
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}

</style>
</head>

Now Design:-

<body>
    <form id="form1" runat="server">
    <div id="wrapper">
    <center>
<div id="wrapper-inner">


<div class="wrapper-inner-tab">
<div class="wrapper-inner-tab-title">Example 1</div>

<div class="wrapper-inner-tab-backgrounds">
<div class="wrapper-inner-tab-backgrounds-first" style="background-color:CornflowerBlue;"><div class="sim-button button1"><span>Login</span></div></div>
</div>

</div>


<div class="wrapper-inner-tab" style="align:center;">
<div class="wrapper-inner-tab-title">Example 2</div>

<div class="wrapper-inner-tab-backgrounds"  style="align:center;">
<div class="wrapper-inner-tab-backgrounds-first"  style="background-color:CadetBlue;"><div class="sim-button button2" data-text="Login"><span>Login</span></div></div>

</div>
</div>



<div class="wrapper-inner-tab">
<div class="wrapper-inner-tab-title">Example 3</div>

<div class="wrapper-inner-tab-backgrounds">
<div class="wrapper-inner-tab-backgrounds-first"  style="background-color:HotPink;"><div class="sim-button button3" data-text="Login"><span>Login</span>
</div></div>
</div>

</div>
</center>
   
    </form>
</body>

Style+Design (Both)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CSSbutton.aspx.cs" Inherits="CSSbutton" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                       
<link rel="shortcut icon" href="http://simbyone.com/_assets/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://simbyone.com/_assets/favicon.ico" />
<link rel="icon" href="http://simbyone.com/_assets/favicon.ico" type="image/x-icon" />

    <title>Button Effects</title>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>

<link href="_css/Icomoon/style.css" rel="stylesheet" type="text/css" />
<link href="_css/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="_scripts/jquery-2.1.4.min.js"></script>
<style type="text/css">
    #wrapper {
float: left;
width: 100%;
}
#wrapper-inner{
width: 950px;
margin-right: auto;
margin-left: auto;
}
.wrapper-inner-tab{
float: left;
width: 100%;
margin-top: 125px;
}
.wrapper-inner-tab-title {
width: 100%;
margin-top: 30px;
font-size: 25px;
color: #666666;
float: left;
text-align: center;
margin-bottom: 80px;
}
.wrapper-inner-tab-backgrounds { 
float: left;
margin-left:140px;
height: 300px;
width: 950px;
}
.wrapper-inner-tab-backgrounds-first{
float: left;
margin-left:140px;
height: 300px;
width: 33.33%;
background-color: Coral;
}
.wrapper-inner-tab-backgrounds-second{
float: left;
margin-left:140px;
height: 300px;
width: 33.33%;
background-color:CornflowerBlue;
}
.wrapper-inner-tab-backgrounds-third{
float: left;
margin-left:140px;
height: 300px;
width: 33.33%;
background-color: #4c5f6d;
}
.sim-button{
line-height: 50px;
height: 44px;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 125px;
width: 119%;
cursor: pointer;
}
.button1 {
color:Black;
font-family:Algerian;
font-size:x-large;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
position: relative;
top: 0px;
    left: 0px;
    height: 65px;
    width: 182px;
}
.button1 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}
.button1:hover {
background-color: rgba(255,255,255,0.1);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.button2 
{
    color:Black;
font-family:Algerian;
font-size:x-large;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
position: relative;
overflow: hidden;
    top: -8px;
    left: 0px;
    width: 165px;
    height: 58px;
}
.button2 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}
.button2 span {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.button2:hover{
background-color: rgba(255,255,255,0.2);
}
.button2:hover > span{
opacity: 0;
-webkit-transform: translate(0px,-40px);
transform: translate(0px,-40px);
}
.button2::after{
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
-webkit-transform: translate(0, 30%);
transform: translate(0, 30%);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.button2:hover::after{
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.button3 {
color:Black;
font-family:Algerian;
font-size:x-large;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
position: relative;
overflow: hidden;
    top: -22px;
    left: 0px;
    width: 173px;
    height: 69px;
}
.button3 a{
color: rgba(51,51,51,1);
text-decoration: none;
display: block;
}
.button3 span {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.button3:hover{
background-color: rgba(255,255,255,0.2);
}
.button3:hover > span{
opacity: 0;
-webkit-transform: translate(0px,40px);
transform: translate(0px,40px);
}
.button3::after{
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
-webkit-transform: translate(-30%, 0);
transform: translate(-30%, 0);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.button3:hover::after{
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}

</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="wrapper">
    <center>
<div id="wrapper-inner">


<div class="wrapper-inner-tab">
<div class="wrapper-inner-tab-title">Example 1</div>

<div class="wrapper-inner-tab-backgrounds">
<div class="wrapper-inner-tab-backgrounds-first" style="background-color:CornflowerBlue;"><div class="sim-button button1"><span>Login</span></div></div>
</div>

</div>


<div class="wrapper-inner-tab" style="align:center;">
<div class="wrapper-inner-tab-title">Example 2</div>

<div class="wrapper-inner-tab-backgrounds"  style="align:center;">
<div class="wrapper-inner-tab-backgrounds-first"  style="background-color:CadetBlue;"><div class="sim-button button2" data-text="Login"><span>Login</span></div></div>

</div>
</div>



<div class="wrapper-inner-tab">
<div class="wrapper-inner-tab-title">Example 3</div>

<div class="wrapper-inner-tab-backgrounds">
<div class="wrapper-inner-tab-backgrounds-first"  style="background-color:HotPink;"><div class="sim-button button3" data-text="Login"><span>Login</span>
</div></div>
</div>

</div>
</center>
   
    </form>
</body>
</html>

ScrrenShot




Posted by at

2 comments:

  1. Chhavi Tyagi30 May 2020 at 08:12

    Its very nice information …...keep it up
    ignou solved assignment
    handwriting solved assignment
    ignou solved assignment 2020-21
    ignou project
    ignou help book
    ignou study material
    ignou question paper



    ReplyDelete
  2. Assignment Global26 August 2022 at 21:37

    It is one thing to do an undergraduate assignment or essay on a subject and something completely different to write a dissertation on a similar area of research. To begin with, there is the form itself. A dissertation is a very lengthy piece of writing, divided into chapters and sections with an extensive reading list. At the same time, there is the most difficult question of finding all that is worth reading on a subject. Our Dissertation Writing Help Services is known for being the most resourceful when it comes to research. This comes from our experts having long years of experience in mentoring students on their research. Get help with dissertation is an extended form of academic writing. It is often a capstone project for research-based Master programs or doctoral-level courses. All Ph.D. candidates need to successfully write a dissertation as a capstone project and submit it in time to qualify for degree conferral.

    ReplyDelete

Subscribe to: Post Comments (Atom)