Ved Prakash Create awesome capsule buttons with pure CSS3 | codinggiri GuidePedia

2

Hey ! there guys welcome to codinggiri once again. Today we are going to code a really beautiful CSS3 button with a really cool animation and guess what we are not going to use any JavaScript for that.These animated buttons are very handy and useful when you want to show some hidden text or picture on :hover.

This tutorial is for those who knows a little about CSS3. beginners will feel a little confused but don't worry i am going to post a series of tutorial very soon on CSS3

Ok so lets code our mark up (HTML5) first

<!--Ved Prakash Pandey -->
<!-- 2014-03-17 -->
 
<!doctype html>
<html>
 <head>
  <title>Cyclades CSS3 Capsule button</title>
  <link href = "hidden-text.css" rel = "stylesheet" type = "text/css"/>
  <link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'/>
 </head>
 <body>
  <h1 align = "center">Cyclades CSS3 Capsule button</h1>
  <h3 align = "center">
   
  </h3>
  <h3 align="center">
   Cyclades CSS3 Capsule buttons are really usefull and beautiful when 
   you want to show some hidden text on <i>:hover</i> with really cool animation
   To take a Tour Please Scroll DOwn and Hover on the button :)</h3>
   
   <h3 align = "center">Please <a href="mailto:linuxlover94@gmail.com">Email ME</a> if you have any question or problems.</h3>
   
   
   <h3 align = "center">Once Again Thank You</h3>
   
  <div class = "button-wrap">
   <a  class = "main-button">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   <a class = "main-button-2">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/> 
   
   <a class = "main-button-3">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   
   <a class = "main-button-4">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   
   <a class = "main-button-5">
    <span class = "main-button-text">Hover me</span>
    <span class = "main-button-hidden-text">CSS3</span>
    <span class = "divider"><span></span></span>
   </a>
   <br/>
   <br/>
   <br/>
   
  </div>
  <br/>
  <br/>
  <br/>
  
 </body>
</html>
 


After that save the code with a file name index.html (Please don't forget to save it with a .html extension).Run the html file into your browser and it will look something like this It is looking ugly. SO what we are waiting for lets code our css for this.

/*Ved Prakash Pandey*
/*2014-03-17*/
 

body{
background-image:url(debut_dark.png);
}
h1, h3, h3 a{
color:#FFFFFF;
font-family:'Offside', cursive;
}
.button-wrap{
margin:5%;
margin-left:45%;
}
.main-button{
background:#1DA548;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-text{
padding-top:15px;
padding-right:25px;
display:block;
font-size:18px;
white-space:nowrap;
text-shadow:0px 1px 1px rgba(255,255,255,0.3);
color:#ffffff;
/*transition*/
-webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
     -o-transition:all 0.2s linear;
        transition:all 0.2s linear;
}
.main-button-hidden-text{
position:absolute;
height:100%;
top:0px;
padding-top:13px;
right:52px;
width:0px;
background:#63707e;
text-shadow:0px -1px 1px #363f49;
color:#fff;
font-size:18px;
white-space:nowrap;
text-transform:uppercase;
text-align:left;
text-indent:10px;
overflow:hidden;
line-height:38px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
/*transition*/lzmxjh1fn7nq9qicuywygix2ccgclc80
-webkit-transition:width 0.3s linear;
   -moz-transition:width 0.3s linear;
     -o-transition:width 0.3s linear;
        transition:width 0.3s linear;
}
.divider{
position:absolute;
right:0px;
top:0px;
height:100%;
width:50px;
border-left:3px solid black;
background:url(arrow-right.png) no-repeat 50% 55%;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
}
.divider span{
width:50px;
height:60px;
opacity:0.5;
position:absolute;
left:50%;
top:50%;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
margin:-20px 0px 0px -20px;
}
.main-button:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#023F14;
}
.main-button:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Second button goes here */

.main-button-2{
background:#544FAF;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-2:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#170FAF;
}
.main-button-2:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-2:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-2:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-2:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Third Button Goes here*/

.main-button-3{
background:#CE5050;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-3:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#D31E1B;
}
.main-button-3:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-3:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-3:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-3:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Fourth button goes here*/
.main-button-4{
background:#D376BA;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-4:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#D60A9F;
}
.main-button-4:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-4:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-4:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-4:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}
/*Fifth button goes here */

.main-button-5{
background:#496066;
padding-right:50px;
padding-left:50px;
display:inline-block;
height:60px;
overflow:hidden;
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
position:relative;
border:3px solid #000000;
float:left;
clear:both;
margin:10px 0;
}
.main-button-5:hover{
/*border-radius*/
-webkit-border-radius:30px 0px 30px 0px;
   -moz-border-radius:30px 0px 30px 0px;
        border-radius:30px 0px 30px 0px;
padding-right:150px;
border:3px solid #000000;
background:#000000;
}
.main-button-5:hover .main-button-text{
text-shadow:0px 2px 2px #5d81ab;
color:#fff;
/*transform*/
-webkit-transform:rotate(-360deg);
   -moz-transform:rotate(-360deg);
    -ms-transform:rotate(-360deg);
     -o-transform:rotate(-360deg);
        transform:rotate(-360deg);
}
.main-button-5:hover .main-button-hidden-text{
width:100px;
/*box-shadow*/
-webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
   -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
        box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 3px 4px 4px rgba(0,0,0,0.5) inset;
}
.main-button-5:hover .divider{
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
border-left:0px;
}
.main-button-5:hover .divider span{
opacity:1;
/*transform*/
-webkit-transform:rotate(540deg);
   -moz-transform:rotate(540deg);
    -ms-transform:rotate(540deg);
     -o-transform:rotate(540deg);
        transform:rotate(540deg);
}

Save that css file with name hidden-text.css , put both html and css files in a same folder , enjoy you are ready to use this code to your website or anywhere else (Please note that in the code you find two .png images , those are simple png images created with microsoft paint , one is for displaying the arrow on the right side of the button and the second one is for displaying dark background image. You can use your own images. )

Post a Comment

  1. Hi,
    How did you removed "- Blogger" from appearing on results? ie while searching on Google (https://www.google.com/search?q=codinggiri.blogspot.com) instead of appearing "codinggiri-Blogger" (for eg. my blog https://www.google.com/search?q=josephstutorialshop.blogspot.com ) your blog is appearing as just "codinggiri"..How did you changed it? Hope you'll reply me..

    ReplyDelete
    Replies
    1. Again my brother it's all about playing with code 8-) count on my last reply i'll help you for sure give me a little time :)

      Delete

 
Top