Button Effects
How do I make an button effects?
What is a button effects? How do you make a button effects? This script and codes were developed by Mohomed Anees on 27 August 2022, Saturday.
Button Effects Previews
Button Effects - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Effects</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="btn">Button</button>
<button class="btn rtl">Button</button>
<button class="button">Button</button>
<button class="button-1">Button</button>
<br><br>Finally button is done<br><br>
<button class="button-2">Button</button>
<div class="btn-holder"> <button class="btn-1">Button</button>
</div>
<div class="btn-holder-1"> <button class="button-test">Hello</button>
</div>
</body>
</html>
Button Effects - Script Codes CSS Codes
.btn { font-size: 1.5em; font-family: 'Roboto', sans-serif; vertical-align: middle; margin: .4em; padding: 1em 2em; border: 0; cursor: pointer; background: #e1e1e1; text-decoration: none; color: #666; -webkit-tap-highlight-color: transparent; display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; border-radius: 50px; overflow: hidden;
}
.btn:hover,
.btn:focus,
.btn:active { color: white;
}
.btn:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; border-radius: 30px;
}
.btn.rtl:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; -webkit-transform: scaleX(-0.6); transform: scaleX(-0.6); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; border-radius: 30px;
}
.btn:hover:before,
.btn:focus:before,
.btn:active:before { -webkit-transform: scaleX(0.6); transform: scaleX(0.6);
}
.btn.rtl:hover:before,
.btn.rtl:focus:before,
.btn.rtl:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);
}
.button { position: relative; font-size: 1.5em; font-family: 'Roboto', sans-serif; vertical-align: middle; padding: 1em 2em; max-height: 82px; border: 0; cursor: pointer; background: #D40164; text-decoration: none; color: #FFF; -webkit-tap-highlight-color: transparent; display: inline-block;
}
.button::before { content: ""; position: absolute; z-index: -1; height: 100%; width: 30px; left: -23px; top: 0; /* width: 70px; height: 75px; top: -1px; bottom: 0; left: -20px; background: #D40164; border-top-left-radius: 55%; border-bottom-left-radius: 55%; */ background: url("http://equalitynowd7ebwzfsmu4r.devcloud.acquia-sites.com/sites/all/themes/equalityd7/images/left.svg") top left no-repeat;
}
.button::after { content: ""; position: absolute; z-index: -1; height: 100%; width: 30px; right: -29px; top: 0; background: url("http://equalitynowd7ebwzfsmu4r.devcloud.acquia-sites.com/sites/all/themes/equalityd7/images/right.svg") top left no-repeat;
}
.button-1 { position: relative; font-size: 1.5em; font-family: 'Roboto', sans-serif; vertical-align: middle; padding: 1em 3em; max-height: 82px; border: 0; cursor: pointer; background: url("http://equalitynowd7ebwzfsmu4r.devcloud.acquia-sites.com/sites/all/themes/equalityd7/images/left.svg") top left no-repeat, url("http://equalitynowd7ebwzfsmu4r.devcloud.acquia-sites.com/sites/all/themes/equalityd7/images/right.svg") top right no-repeat; text-decoration: none; color: #FFF; -webkit-tap-highlight-color: transparent; display: inline-block; overflow: hidden;
}
.button-1::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 23px; right: 23px; background: #D40164;
}
.button-2 { position: relative; font-size: 1.5em; font-family: 'Roboto', sans-serif; vertical-align: middle; padding: 1em 3em; max-height: 82px; border: 0; cursor: pointer; background-color: red; -webkit-mask: url(http://equalitynowd7ebwzfsmu4r.devcloud.acquia-sites.com/sites/all/themes/equalityd7/images/button.svg) no-repeat 50% 50%; mask: url(http://equalitynowd7ebwzfsmu4r.devcloud.acquia-sites.com/sites/all/themes/equalityd7/images/button.svg) no-repeat 50% 50%; -webkit-mask-size: contain; mask-size: contain; text-decoration: none; color: #FFF; -webkit-tap-highlight-color: transparent; display: inline-block; overflow: hidden;
}
.button-2::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: -100%; width: 100%; background: blue; background-size: contain; border-top-left-radius: 50px; border-bottom-left-radius: 50px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
.button-2:hover::before { right: -45%;
}
.btn-holder { position: relative; margin: 50px; float: left;
}
.btn-holder:before { content: ""; position: absolute; z-index: 0; width: 100px; height: 76px; background: red; border-radius: 100px; top: 0; left: -30px;
}
.btn-holder:after { content: ""; position: absolute; z-index: -1; width: 100px; height: 76px; background: red; border-radius: 100px; top: 0; right: -30px;
}
.btn-1 { font-size: 1.5em; font-family: 'Roboto', sans-serif; vertical-align: middle; margin: 0; padding: 1em 2em; border: 0; cursor: pointer; background: red; text-decoration: none; color: #666; -webkit-tap-highlight-color: transparent; display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; /* border-radius: 50px; */ overflow: hidden;
}
.btn-1:hover,
.btn-1:focus,
.btn-1:active { color: white;
}
.btn-1:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #2098d1; transform: translateX(-50px); -webkit-transform: translateX(-50px); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; border-radius: 30px;
}
.btn-1:hover:before,
.btn-1:focus:before,
.btn-1:active:before { -webkit-transform: scaleX(0.6); transform: scaleX(0.6);
}
.btn-holder-1 { background: #d40164; border: none; color: white; cursor: pointer; display: inline-block; font-size: 22px; height: 30px; margin-left: 20px; padding: 15px 50px; position: relative; transition: .1s background ease-out;
}
.btn-holder-1:before, .btn-holder-1:after { content: ''; background: #d40164; border-radius: 50%; display: block; height: 100%; position: absolute; transition: .3s background ease-out; width: 40px;
}
.btn-holder-1:before { top: 0; left: -16px;
}
.btn-holder-1:after { top: 0; right: -16px;
}
.btn-holder-1:hover, .btn-holder-1:hover:before, .btn-holder-1:hover:after, .button-test:hover { background: blue;
}
.button-test { height: 100%; position: absolute; width: 100%; border: none; z-index: 1; top: 0; left: 0; bottom: 0; background: #d40164;
}
| Developer | Mohomed Anees |
| Username | mohomedanees |
| Uploaded | August 27, 2022 |
| Rating | 3 |
| Size | 4,076 Kb |
| Views | 24,288 |
Do you need developer help for Button Effects?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mohomed Anees (mohomedanees) Script Codes
| Name | Size |
| Button Effect Final | 2,162 Kb |
| Button Fix 1 | 3,489 Kb |
| Button Fix 3 | 2,893 Kb |
| Transparent CSS Triangle with Borders | 2,195 Kb |
| Outer border to a Div | 2,219 Kb |
| Button Fix 2 | 3,375 Kb |
| Image Caption | 2,749 Kb |
| Custom Radio Button | 1,186 Kb |
| Custom input file | 1,682 Kb |
| Image Caption on Hover | 1,933 Kb |
Create amazing SEO content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Shopping cart | Andiio | 6,581 Kb |
| A form arranged using automatic placement. | Vikasford | 2,103 Kb |
| FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
| Vue Transition | Chenming142 | 4,561 Kb |
| Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
| Zip Button test | Lje7462 | 1,932 Kb |
| Email Marketing Mock | Kristenzirkler | 8,224 Kb |
| Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
| Lunar eclipse | Ademilter | 2,056 Kb |
| Flexbox playground | Enxaneta | 5,418 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!