Long Shadow Button

Developer
Uixcrazy.com
Size
3,550 Kb
Views
16,192
  1. Long Shadow Button Previews
  2. Long Shadow Button HTML Codes
  3. Long Shadow Button CSS Codes

How do I make an long shadow button?

What is a long shadow button? How do you make a long shadow button? This script and codes were developed by Uixcrazy.com on 06 November 2022, Sunday.

Long Shadow Button Previews
IQ Test

Long Shadow Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Long Shadow Button</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="btn-s1"><span>button có bóng đổ</span></div>
</body>
</html>

Long Shadow Button - Script Codes CSS Codes

body { background: #33393E; font-size: 12px; font-weight: 300; font-family: 'Open Sans', sans-serif; padding-top: 50px; text-align: center;
}
.btn-s1 { font-size: 28px; display: inline-block; vertical-align: middle; text-align: center; z-index: 1; width: 100%; max-width: 320px; position: relative; top: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.7s; transition: all 0.7s; background: #EF5C45; color: #ffffff; text-shadow: #d7533e 1px 1px, #d7533e 2px 2px, #d7533e 3px 3px, #d7533e 4px 4px, #d7533e 5px 5px, #d7533e 6px 6px, #d7533e 7px 7px, #d7533e 8px 8px, #d7533e 9px 9px, #d7533e 10px 10px, #d8533e 11px 11px, #da543e 12px 12px, #db543f 13px 13px, #dd553f 14px 14px, #df5640 15px 15px, #e05640 16px 16px, #e25741 17px 17px, #e35741 18px 18px, #e55842 19px 19px, #e75942 20px 20px, #e85943 21px 21px, #ea5a43 22px 22px, #eb5a44 23px 23px, #ed5b44 24px 24px, #ef5c45 25px 25px; box-shadow: #2f353a 1px 1px, #2f353a 2px 2px, #2f353a 3px 3px, #2f353a 4px 4px, #2f353a 5px 5px, #2f353a 6px 6px, #2f353a 7px 7px, #2f353a 8px 8px, #2f353a 9px 9px, #2f353a 10px 10px, #2f353a 11px 11px, #2f353a 12px 12px, #2f353a 13px 13px, #2f353a 14px 14px, #2f353a 15px 15px, #2f353a 16px 16px, #2f353a 17px 17px, #2f353a 18px 18px, #2f353a 19px 19px, #2f353a 20px 20px, #2f353a 21px 21px, #2f353a 22px 22px, #2f353a 23px 23px, #2f353a 24px 24px, #2f353a 25px 25px, #2f353a 26px 26px, #2f353a 27px 27px, #2f353a 28px 28px, #2f353a 29px 29px, #2f353a 30px 30px, #2f353a 31px 31px, #2f353a 32px 32px, #2f353a 33px 33px, #2f353a 34px 34px, #2f353a 35px 35px, #2f353a 36px 36px, #2f353a 37px 37px, #2f353a 38px 38px, #2f353a 39px 39px, #2f353a 40px 40px, #2f353a 41px 41px, #2f353a 42px 42px, #2f353a 43px 43px, #2f353a 44px 44px, #2f353a 45px 45px, #2f353a 46px 46px, #2f353a 47px 47px, #2f353a 48px 48px, #2f353a 49px 49px, #2f353a 50px 50px, #2f353a 51px 51px, #30363b 52px 52px, #30363b 53px 53px, #30363b 54px 54px, #30363b 55px 55px, #30363b 56px 56px, #30363b 57px 57px, #30363b 58px 58px, #30363b 59px 59px, #30363b 60px 60px, #30363b 61px 61px, #31373c 62px 62px, #31373c 63px 63px, #31373c 64px 64px, #31373c 65px 65px, #31373c 66px 66px, #31373c 67px 67px, #31373c 68px 68px, #31373c 69px 69px, #31373c 70px 70px, #31373c 71px 71px, #32383d 72px 72px, #32383d 73px 73px, #32383d 74px 74px, #32383d 75px 75px, #32383d 76px 76px, #32383d 77px 77px, #32383d 78px 78px, #32383d 79px 79px, #32383d 80px 80px, #33393e 81px 81px;
}
.btn-s1 span { display: block; position: relative; cursor: pointer; padding: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.btn-s1:hover { transition: all .3s; text-shadow: 5px 5px 2px #d7533e;
}
Long Shadow Button - Script Codes
Long Shadow Button - Script Codes
Home Page Home
Developer Uixcrazy.com
Username uixcrazy
Uploaded November 06, 2022
Rating 3
Size 3,550 Kb
Views 16,192
Do you need developer help for Long Shadow Button?

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!

Uixcrazy.com (uixcrazy) Script Codes
Name
SVG Text Color Gradient, Stroke, Mask
CSS - Floating Interaction
Accordion menu
Ace editor demo
Css 3 - drop shadow image png
Bootstrap tooltip
JQuery - simple tab
Pluzzle
Lodash - sort name in object
JQuery - simple dialog
Create amazing blog posts 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!