» » » » » » Create Bubble Buttons Using CSS3

image




A cool feature to add in your site is a bubble button, and this CSS3 animated button tutorial comes from web developer Nagu Akkina . The effect here is when you hover your mouse over the buttons, you will see bubble movements in it. However, the effects are only visible to browsers that support CSS3.

Below are the following steps Nagu demonstrates on how you can add bubble buttons:
  1. Go to your Blogger Dashboard > Design > Edit HTML
  2. Make a backup first before doing any changes to your blog
  3. Expand Widget Templates
  4. Find this code (hit ctrl+F on your keyboard)
 ]]></b:skin>
Replace it with the following CSS code:
 button{
 font:15px Calibri, Arial, sans-serif;
 /* A semi-transparent text shadow */
 text-shadow:1px 1px 0 rgba(255,255,255,0.4);

 /* Overriding the default underline styling of the links */
 text-decoration:none !important;
 white-space:nowrap;

 display:inline-block;
 vertical-align:baseline;
 position:relative;
 cursor:pointer;
 padding:10px 20px;

 background-repeat:no-repeat;
 /* The following two rules are fallbacks, in case
 the browser does not support multiple backgrounds. */
 background-position:bottom left;
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png');

 /* Multiple backgrounds version. The background images
 are defined individually in color classes */

 background-position:bottom left, top right, 0 0, 0 0;
 background-clip:border-box;

 /* Applying a default border raidus of 8px */

 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;

 /* A 1px highlight inside of the button */

 -moz-box-shadow:0 0 1px #fff inset;
 -webkit-box-shadow:0 0 1px #fff inset;
 box-shadow:0 0 1px #fff inset;

 /* Animating the background positions with CSS3 */
 /* Currently works only in Safari/Chrome */

 -webkit-transition:background-position 1s;
 -moz-transition:background-position 1s;
 transition:background-position 1s;
 }
 .button:hover{

 /* The first rule is a fallback, in case the browser
 does not support multiple backgrounds
 */

 background-position:top left;
 background-position:top left, bottom right, 0 0, 0 0;
 }
 .button:active{
 /* Moving the button 1px to the bottom when clicked */
 bottom:-1px;
 }
 /* The three buttons sizes */
 .button.big        { font-size:30px;}
 .button.medium    { font-size:18px;}
 .button.small    { font-size:13px;}
 /* A more rounded button */
 .button.rounded{
 -moz-border-radius:4em;
 -webkit-border-radius:4em;
 border-radius:4em;
 }

 /* Defining four button colors */

 /* BlueButton */
 .blue.button{
 color:#0f4b6d !important;

 border:1px solid #84acc3 !important;

 /* A fallback background color */
 background-color: #48b5f2;

 /* Specifying a version with gradients according to */

 background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'),
 -moz-radial-gradient(    center bottom, circle,
 rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
 -moz-linear-gradient(#4fbbf7, #3faeeb);
 background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'),
 -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
 from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
 }
 .blue.button:hover{
 background-color:#63c7fe;

 background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'),
 -moz-radial-gradient(    center bottom, circle,
 rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
 -moz-linear-gradient(#63c7fe, #58bef7);

 background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'),
 -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
 from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
 }
 /* Green Button */
 .green.button{
 color:#345903 !important;
 border:1px solid #96a37b !important; 
 background-color: #79be1e;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
 }
 .green.button:hover{
 background-color:#89d228;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
 }
 /* Orange Button */
 .orange.button{
 color:#693e0a !important;
 border:1px solid #bea280 !important; 
 background-color: #e38d27;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
 }
 .orange.button:hover{
 background-color:#ec9732;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
 }
 .gray.button{
 color:#525252 !important;
 border:1px solid #a5a5a5 !important; 
 background-color: #a9adb1;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
 }
 .gray.button:hover{
 background-color:#b6bbc0;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YPIVrBzXkZfVifQtI05iv8ndDTCeQXyX_pz9EGFeITAaPUR-lx4Cxcimes8GatDgNKd7pDme1hOFCJXywlwfKAsKMxu1mdDfR2qwBOb8RNZH5EEvxmJDbDhlhTr4WbTTl70l8TeH8/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
 }
 ]]></b:skin>
Save template.
For HTML,
(for large sized buttons)
 <a href=" your LINK" class="button big blue"> your LINKNAME/TITLE</a>
 <a href=" your LINK" class="button big green"> your LINKNAME/TITLE</a>
 <a href=" your LINK" class="button big orange"> your LINKNAME/TITLE</a>
 <a href=" your LINK" class="button big gray"> your LINKNAME/TITLE</a>

(for medium sized buttons)
<a href=" your LINK"> your LINKNAME/TITLE</a>
 <a href=" your LINK"> your LINKNAME/TITLE</a>
 <a href=" your LINK"> your LINKNAME/TITLE</a>
 <a href=" your LINK"> your LINKNAME/TITLE</a>

(for small sized buttons)
<a href="your LINK">your LINKNAME/TITLE</a>
 <a href=" your LINK"> your LINKNAME/TITLE</a>
 <a href=" your LINK"> your LINKNAME/TITLE</a>
 <a href=" your LINK"> your LINKNAME/TITLE</a>
(for small sized buttons with rounded corners)
<a href=" your LINK "> your LINKNAME/TITLE </a>
 <a href=" your LINK "> your LINKNAME/TITLE </a>
 <a href=" your LINK "> your LINKNAME/TITLE </a>
 <a href=" your LINK "> your LINKNAME/TITLE E</a>




02:16
Unknown
, , , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 
Top