Style your button with transform and transition : CSS3

Style up your button with CSS3 transitions and transform. i'm going to give a demo to use these properties. below some basic information of Transition and Transform

Transform :

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

transform: none|transform-functions|initial|inherit;

Transition :

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

• Specify the CSS property you want to add an effect to
• Specify the duration of the effect.

transition: all 1s ease-in-out;

Example with a Button


HTML :

<div>
 <button type="button" class="btn-effect">Submit</button>
</div>

CSS :

.btn-effect:before {
    background: none repeat scroll 0 0 #66B3F6;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    color: #fff;
}
.btn-effect:after {
    background: none repeat scroll 0 0 #BFE1FB;
    content: "";
    height: 0;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateX(0%) translateY(-25%) rotate(45deg);
    -webkit-transform: translateX(0%) translateY(-25%) rotate(45deg);
    transition: all 0.3s ease 0s;
   -webkit-transition: all 0.3s ease 0s;
    width: 100%;
    z-index: -1;
    border: 1px solid #f4f4f4;
    left: 0;
    top: 0;
}
.btn-effect {
    border: 0.5px solid #f4f4f4;
    color: #fff;
    cursor: pointer;
    font-family: segoe ui;
    font-size: 18px;
    height: 45px;
    line-height: 18px;
    padding: 10px 40px;
    position: relative;
    font-variant: small-caps;
    transition: all 0.5s ease-in-out 0s;
    box-shadow: 1px 3px 5px 1px #aaa;
    font-size: 22px;
    overflow: hidden;
    z-index: 99;
  border-radius:5px;
}
.btn-effect:hover, .btn-effect:active {
    color: #000000 !important;
}
.btn-effect:hover:after {
    height: 215%;
    opacity: 1;
    width: 100%;
}
.btn-effect:active:after {
    height: 235%;
    opacity: 1;
}

LIVE DEMO :

Read More

CSS3 Media Queries for Screen

CSS3 @media Screen  Queries..

 CSS3 added support for the media="screen" way of defining which stylesheet to use for which representation of the data. CSS3 adds a new feature to this functionality, by adding media queries.

Basically, this means you can change stylesheets based on for instance the width and height of the viewport. In a broader sense, this means as the spec puts it: “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.”

Below are two tests, for min-width and max-width, currently only functional (and thus green) in Safari 3, Opera, and Firefox 3.1 (Alpha). This is however the future of web development, and could make building pages that are usable in both the mobile as the normal web a lot easier.

min-width 640px

max-width 1100px

The CSS which should color the two divs above is as follows:

@media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0; } } @media screen and (max-width: 2000px) { #media-queries-2 { background-color: #0f0; } }

MEDIA QUERIES FOR STANDARD DEVICES

/* Smartphones (portrait and landscape) ----------- */
 @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
 @media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
 @media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
 @media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
 @media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
 @media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
} 

Read More