Mouseover & Focus Selector CSS3 Transitions Code HTML and CSS3

Mouseover & Focus Selector CSS3 Transitions Code HTML and CSS3


HTML:

Horizontal Tab (Resize auto and auto focus in any device transtition):

<div class="tab" id="blue">Blue</div> 
 <div class="tab" id="green">Green</div> 
 <div class="tab" id="yellow">Yellow</div> 
 <div class="tab" id="red">Red</div> 
On Form Submissions:

<input class="searchBar" id="blue" type="text" value="Search"> 
 <br/> 
 <input class="searchBar" id="green" type="text" value="Search"> 
 <br/> 
 <input class="searchBar" id="yellow" type="text" value="Search"> 
 <br/> 
 <input class="searchBar" id="red" type="text" value="Search"> 
CSS3 of HTML above:

/* BODY STYLING */ 

body{padding: 50px 50px; background: #fff; font-family:Verdana; color:#2d2d2d; font-weight:100; } 
hr {color:#2d2d2d; } 

 
/* EXPANDING SEARCH BAR STARTS HERE */ 

 /* Main Styling */ 

 input[type=text].searchBar{width:100px;padding:4px 8px;margin-top:10px;color:#fff;font-size:12px;border-radius:10px;border:0;-webkit-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s}

/* Individual Styling */ 

input[type=text]#blue{background:#0faae4}
input[type=text]#green{background:#5cb85c}
input[type=text]#yellow{background:#f0ad4e}
input[type=text]#red{background:#d9534f}
input[type=text].searchBar:focus{width:165px;outline:0;background:#fff;border:1px solid #999}
/* Individual Styling on Focus */ 

 input[type=text]#blue:focus{color:#0faae4; background:#fff; } 
 input[type=text]#green:focus{color:#5cb85c; background:#fff; } 
 input[type=text]#yellow:focus{color:#f0ad4e; background:#fff; } 
 input[type=text]#red:focus{color:#d9534f; background:#fff; } 

/* EXPANDING MOUSE OVER TAB STARTS HERE */ 
/* Main Styling */ 

div.tab{width:100px;float:left;display:inline-block;padding:4px 8px;color:#fff;font-size:12px;border:0;-webkit-transition:all ease-in-out .3s;-moz-transition:all ease-in-out .3s}
/* Individual Styling */
div#blue{background:#0faae4;border-radius:10px 0 0 10px}div#green{background:#5cb85c}
/* Main Styling On Focus for all */
div#yellow{background:#f0ad4e}div#red{background:#d9534f;border-radius:0 10px 10px 0}div.tab:hover{width:165px;outline:0;background:#fff}
/* Individual Styling on Focus */
div#blue:hover{width:200px;color:#e9e9e9}div#green:hover{color:#e9e9e9;width:165px}div#yellow:hover{width:110px;color:#e9e9e9}div#red:hover{width:140px;color:#e9e9e9}

DeMo

0 Response to "Mouseover & Focus Selector CSS3 Transitions Code HTML and CSS3"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel