SOFTCODE - HTML CSS JAVASCRIPT Tips and Tricks

Nov 5, 2023

CSS Bubble Button | Html CSS Button

SOURCE CODE

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
	body {
	 font-size: 16px;
	 font-family: 'Helvetica', 'Arial', sans-serif;
	 text-align: center;
	 background-color: #f8faff;
}
 .bubbly-button {
	 font-family: 'Helvetica', 'Arial', sans-serif;
	 display: inline-block;
	 font-size: 1em;
	 padding: 1em 2em;
	 margin-top: 100px;
	 margin-bottom: 60px;
	 -webkit-appearance: none;
	 appearance: none;
	 background-color: #ff0081;
	 color: #fff;
	 border-radius: 4px;
	 border: none;
	 cursor: pointer;
	 position: relative;
	 transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
	 box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}
 .bubbly-button:focus {
	 outline: 0;
}
 .bubbly-button:before, .bubbly-button:after {
	 position: absolute;
	 content: '';
	 display: block;
	 width: 140%;
	 height: 100%;
	 left: -20%;
	 z-index: -1000;
	 transition: all ease-in-out 0.5s;
	 background-repeat: no-repeat;
}
 .bubbly-button:before {
	 display: none;
	 top: -75%;
	 background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 20%, #ff0081 20%, transparent 30%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
	 background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
 .bubbly-button:after {
	 display: none;
	 bottom: -75%;
	 background-image: radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%);
	 background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
 .bubbly-button:active {
	 transform: scale(0.9);
	 background-color: #e60074;
	 box-shadow: 0 2px 25px rgba(255, 0, 130, 0.2);
}
 .bubbly-button.animate:before {
	 display: block;
	 animation: topBubbles ease-in-out 0.75s forwards;
}
 .bubbly-button.animate:after {
	 display: block;
	 animation: bottomBubbles ease-in-out 0.75s forwards;
}
 @keyframes topBubbles {
	 0% {
		 background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
	}
	 50% {
		 background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
	}
	 100% {
		 background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
		 background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
 @keyframes bottomBubbles {
	 0% {
		 background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
	}
	 50% {
		 background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
	}
	 100% {
		 background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
		 background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
	}
}
 
</style>
</head>
<body>
	<button class="bubbly-button">Click me!</button>
  <script>
  var animateButton = function(e) {

  e.preventDefault;
  //reset animation
  e.target.classList.remove('animate');
  
  e.target.classList.add('animate');
  setTimeout(function(){
    e.target.classList.remove('animate');
  },700);
};

var bubblyButtons = document.getElementsByClassName("bubbly-button");

for (var i = 0; i < bubblyButtons.length; i++) {
  bubblyButtons[i].addEventListener('click', animateButton, false);
}
</script>
</body>
</html>

Author. SoftCode

Sep 15, 2023

7 Amazing CSS Gradient Text Animation Effects in Html CSS

Text Gradient Effects 1

Html:

<h1 class="shimmer">CSS Gradient Animation</h1>

CSS:

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);

body {

background: #000;

}

.shimmer {

font-family: 'Oswald', sans-serif;

font-weight: 400;

font-size: 2.4em;

margin: 0 auto;

padding: 0 0 0 0;

display: inline;

margin-bottom: 0;

}

p {

font-weight: 300;

font-size: 0.8em;

color: rgba(255,255,255,0.65);

width: 500px;

text-align: justify;

line-height: 1.5em;

border-top: 1px dashed rgba(255,255,255,0.2);

margin: 10px 0 0 5px;

padding-top: 10px;

}

p a {

text-decoration: none;

color: #fff;

}

p a:visted {

color: #fff;

}

.shimmer {

text-align: center;

color: rgba(255,255,255,0.1);

background: #ed8080; /* Old browsers */

background: -moz-linear-gradient(left, #ed8080 0%, #2a77d6 16%, #5eb524 32%, #eacd25 48%, #ed8080 64%, #2a77d6 80%, #5eb524 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ed8080), color-stop(16%,#2a77d6), color-stop(32%,#5eb524), color-stop(48%,#eacd25), color-stop(64%,#ed8080), color-stop(80%,#2a77d6), color-stop(100%,#5eb524)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left, #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left, #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(left, #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* IE10+ */

background: linear-gradient(to right, #ed8080 0%,#2a77d6 16%,#5eb524 32%,#eacd25 48%,#ed8080 64%,#2a77d6 80%,#5eb524 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8080', endColorstr='#5eb524',GradientType=1 ); /* IE6-9 */

-webkit-background-size: 300% 300%;

-moz-background-size: 300% 300%;

background-size: 300% 300%;

-webkit-background-clip: text;

-moz-background-clip: text;

background-clip: text;

animation:shimmer infinite 3s linear;

-o-animation:shimmer infinite 3s linear;

-moz-animation:shimmer infinite 3s linear;

-webkit-animation:shimmer infinite 3s linear;

background-repeat: no-repeat;

background-position: top left;

background-color: #222;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

@-moz-keyframes shimmer {

0% {

background-position: top left;

}

100% {

background-position: top right;

}

@-webkit-keyframes shimmer {

0% {

background-position: top left;

}

100% {

background-position: top right;

}

@-o-keyframes shimmer {

0% {

background-position: top left;

}

100% {

background-position: top right;

}

@keyframes shimmer {

0% {

background-position: top left;

}

100% {

background-position: top right;

}

- - - - - - - - - - -

Text Gradient Effects 2

Html:

<h1>Lovely Gradient</h1>

CSS:

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body{

}

h1 {

font-family: 'Roboto', sans-serif;

font-weight: 700;

font-size:42px;

text-transform:uppercase;

color: transparent;

background: linear-gradient(to left, #1e5799, #2ce0bf, #76dd2c, #dba62b, #e02cbf, #1e5799);

background-size: 1000px 100%;

animation: bg 15s linear infinite;

background-clip: text;

-webkit-background-clip: text;

position: absolute;

top: 45%;

left: 50%;

transform: translate(-50%,-50%);

}

@keyframes bg {

0% {

background-position-x: 0;

}

100% {

background-position-x: 10000px;

}

- - - - - - - - - - -

Text Gradient Effects 3

Html:

<h1>smooth gradient</h1>

</header>

CSS:

body {

margin: 0 auto;

font-family: "Open Sans", sans-serif;

background-color: hsl(0, 0%, 97%);

}

header {

height: calc(100vh - 1px);

display: flex;

flex-direction: row;

justify-content: center;

flex-wrap: wrap;

align-items: center;

align-content: center;

}

header h1 {

font-weight: 700;

90deg,

hsl(0, 90%, 70%),

hsl(45, 90%, 70%),

hsl(90, 90%, 70%),

hsl(135, 90%, 70%),

hsl(180, 90%, 70%),

hsl(225, 90%, 70%),

hsl(270, 90%, 70%),

hsl(315, 90%, 70%),

hsl(360, 90%, 70%)

);

background-size: 400%;

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

animation: animate 10s linear infinite;

}

@keyframes animate {

0% {

background-position: 0%;

}

50% {

background-position: 100%;

}

100% {

background-position: 0%;

}

- - - - - - - - - - -

Text Gradient Effects 4

Html:

<h1>Gradient Text</h1>

CSS:

::before,

::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

h1 {

text-transform: uppercase;

font-size: 72px;

font-family: Verdana, Geneva, Tahoma, sans-serif;

background: linear-gradient(

180deg,

#fd004c,

#fe9000,

#fff020,

#3edf4b,

#3363ff,

#b102b7,

#fd004c

);

background-size: 200% 200%;

color: transparent;

background-clip: text;

-webkit-background-clip: text;

animation: change 5s ease-in-out infinite;

}

@keyframes change {

0% {

background-position: 0 0;

}

50% {

background-position: 0 100%;

}

100% {

background-position: 0 0;

}

@media(max-width:576px){

h1{

font-size:32px;

}

- - - - - - - - - - -

Text Gradient Effects 5

Html:

<h1 class="gradient-text">I ❤ Gradient</h1>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

body{

background-color: #1a1a1a;

display: grid;

place-items: center;

min-height: 100vh;

font-family: 'Poppins', sans-serif;

}

.gradient-text{

animation: gradient 3s linear infinite;

font-size: 60pt;

background: -webkit-linear-gradient(15deg, #4474E4, #D525E3 , #4474E4, #D525E3 );

background-size: 300%;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

@keyframes gradient {

from{

background-position: 100% 0%;

}

to{

background-position: 0% 0%;

}

- - - - - - - - - - -

Text Gradient Effects 6

Html:

<h1 class="header">CSS Gradient Text</h1>

CSS:

html {

background: #1d1f20;

margin: 0 4rem;

}

.header {

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

font-size: 3rem;

/*font-size: 6rem;*/

font-weight: 700;

letter-spacing: 2px;

text-align: center;

color: #f35626;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

-webkit-animation: hue 1s infinite linear;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

@-webkit-keyframes hue {

from {

-webkit-filter: hue-rotate(0deg);

}

to {

-webkit-filter: hue-rotate(-360deg);

}

- - - - - - - - - - -

Text Gradient Effects 7

Html:

<h1>Gradient Text</h1>

</div>

CSS:

padding: 0;

margin: 0;

}

body{

background-color: #000;

}

.center{

position: absolute;

text-align: center;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

.center h1{

color: rgba(255,0,0,0.1);

font-size: 100px;

text-transform: uppercase;

font-weight: 700;

background-size: cover;

background-image: url(https://cdn-images-1.medium.com/max/2000/1*Jalb56N34pBIGCjQULtW3A.jpeg);

-webkit-background-clip: text;

animation: background-text-animation 15s linear infinite;

}

@keyframes background-text-animation {

0%{

background-position: left 0px top 50%;

}

50%{

background-position: left 1500px top 50%;

}

100%{

background-position: left 0px top 50%;

}

- - - - - - - - - - -

Author. SoftCode

Sep 7, 2023

Gradient Text Animation using HTML CSS

#cssanimation #cssgradient #gradient

Description:

I hope this tutorial will help you know a little bit in CSS

Source Code:

HTML

<!DOCTYPE html>

<head>

<title>Gradient Text</title>

</head>

<body>

<h1 class="gradient">Gradient.</h1>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

body {

height: 100vh;

width: 100vw;

display: flex;

justify-content: center;

align-items: center;

font-family: 'Pacifico', cursive;

font-size: 20px;

background: #EDDDD4;

}

.gradient {

/*background-image: linear-gradient(90deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%);*/

background-image: linear-gradient(90deg, rgba(127,0,255,1) 0%, rgba(255,0,255,1) 56%, rgba(255,0,54,1) 100%);

color: transparent;

-webkit-background-clip: text;

animation: grad-text 1s infinite;

}

@keyframes grad-text {

50% {

background-image: linear-gradient(262deg, rgba(127,0,255,1) 0%, rgba(255,0,255,1) 56%, rgba(255,0,54,1) 100%);

}

Author. SoftCode

Sep 6, 2023

How to Create Gradient Realistic Ball using Html and CSS

#CSS #CSSBall #CSSAnimation

Description:

Here learn How to Create Gradient Realistic Ball using Html and CSS very simple method and easy like gradient text animation.

I hope this tutorial will help you know a little bit in CSS

Source Code

HTML

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="UTF-8">

<title>gradient ball </title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<div class="ball"></div>

</div>

</body>

</html>

CSS

.container {

width: 98vw;

height: 97vh;

background: #fff;

display: flex;

justify-content: center;

align-items: center;

position: relative;

}

.container .ball {

background: lightgray;

width: 400px;

height: 400px;

border-radius: 50%;

}

.container .ball::before {

content: "";

width: 400px;

height: 400px;

border-radius: 50%;

z-index: 0;

position: absolute;

box-shadow: 0 10px 2px -10px #2e6789,

35px 90px 210px 2px #36779d,

45px 65px 50px -35px #36779d;

}

.container .ball::after {

content: "";

width: 400px;

height: 400px;

border-radius: 50%;

z-index: 0;

position: absolute;

}

Author. SoftCode

Jul 8, 2021

Simple Loading Animation with CSS | Html CSS Page Loader

#CSSLoader #Html #CSS

Description:

Simple Loading Animation with the Html CSS and this is quick loader animation under the animation effects and simple loading.

A page loader is any kind of animation that visually communicates to a visitor that the page is loading and to just sit tight for a few seconds.

I hope this tutorial will help you know a little bit in CSS

Author. SoftCode

Jun 17, 2021

Animated Navigation Menu Using CSS | Html CSS Menubar

#cssmenu #navingationmenu #cssmenuanimation

Description:

Create Animated Navingation Menu using css with the simple html and pure css under the menubar and navbar, simple menubar toggle.

Animated Navigation Menu Using CSS | Html CSS Menubar

Author. SoftCode

CSS Neon Loader Animation | Html CSS Glowing Loader

Card Hover Effects CSS Animations CSS Button CSS Neon

#csshovereffects #cssanimation #cardhovereffects

Description:

This is a Neon Loader Animation with the Html CSS and this is awesome Glowing Loader effect under the loader animation.

How to create Glowing with Neon Loading animation with simple HTML and pure CSS

Author. SoftCode

Jun 15, 2021

Awesome Login Form with Html & CSS Step by Step

#loginform #cssloginform #amazingloginform

Description:

Learn how to make login form using with html and css from this tutorial amazing login form using with very simple html & pure css.

Here we can learn very easy and simple login form using html and pure css. Login form is very useful for any website. Login form or sign in form get users data saved in the website. So lets get start to learn this amazing and awesome login form with html & css.

Author. SoftCode

Jun 13, 2021

CSS Image Hover Transition Effects | How To Create Image Hover Effects

#csseffects #imagehovereffects #hovereffects

Description:

CSS image hover transition effects that is make using html pure css to make css effects in the section css hover image effects. for more related html css cards, animation, pure css cards, card hover effects, html css image hover effects, html css loader animation, text animation responsive Glassmorphism SUBSCRIBE softcode.

Author. SoftCode

Jun 12, 2021

Pure CSS Card Hover Effects | Html CSS Cards

#purecsscards #htmlcsscards #cardhovereffects

Description:

In this video learn how to make css cards that is make using html pure css to make css cards in the section css card hover effects.

Author. SoftCode

Jun 10, 2021

Scroll Indicator Using CSS | Html CSS Page Scroll Indicator

#CSSScrollIndicator #CSSPagescroll #PageScrollCSS

Description:

Scrollbar Indicator Using HTML, CSS and Jquery. Scrollbar Indicator With Custom Scrollbar.
How to Create Scrolling indigator using with html and pure css.

Author. SoftCode

Jun 7, 2021

Sticky Section Using Html CSS no JavaScript | CSS Sticky Position

#StickySectionCSS #StickyPosition #StickysectionnoJavaScript

Description:

On this tutorial learn Sticky Section Using Html CSS no JavaScript | CSS Sticky Position,css sticky,css sticky without javascript,pure css sticky header,how to css sticky header.

Author. SoftCode