Monday, 1 November 2021

BUTTON PADDING CHANGE HEIGHT WIDTH


------------------------------------------------------------------------------------------------------------
PADDING BUTTON CHANGE INTO WIDTH AND HEIGHT
EMOJI SITES
https://yaytext.com/emoji/keycaps/
------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#ID0 {
background-color:red;
color:White;
padding:100px;
text-align: center;
text-decoration: none;
display:inline-block;
font-size:50px;
}
#ID1 {
background-color:green;
color:White;
/*GOOGLE POPUP NOT SHOW LESS VALUE THEREFORE
WE USE WIDTH 408.65 AND WE DON'T USE GOOGLE POPUP VALUE
*/
width:408.65px;
height:262px;
text-align: center;
text-decoration: none;
display:inline-block;
font-size:50px;
}
</style>
</head>
<body>
<button id="ID0">BUTTON</button>
<button id="ID1">BUTTON</button>
</body>
</html>
------------------------------------------------------------------------------------------------------------
CSS display Property Use
-------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
#ButtonContainer{
width:235px;
height:100px;
border:5px solid Black;
display:inline-flex; 
}
button{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div id="ButtonContainer">
<button style="background-color:Red;">BUTTON1</button>
<button style="background-color:Blue;">BUTTON2</button>
<button
style="background-image: url(&quot;https://www.w3schools.com/tags/smiley.gif&quot;);
background-repeat:no-repeat;background-position:center;
">BUTTON3</button>
</div>

</body>
</html>
--------------------------------------------------------------------------------------------------------------
BACKGROUND IMAGE FIXED OR SCROLL
--------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
<html> <!-- https://www.youtube.com/watch?v=IqQQFc9oA_k --> <!-- http://www.vishacademy.com/ --> <!-- https://www.w3schools.com/cssref/pr_background-attachment.asp --><head> 
<style> body{ padding:250px; background-image:url(https://goo.gl/YBbjGr); background-repeat:no-repeat; background-position:80% 30%; background-attachment:fixed; } </style> </head> <body> <h1>The background-attachment Property</h1> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>The background-image is fixed. Try to scroll down the page.</p> <p>If you do not see any scrollbars, try to resize the browser window.</p> </body>
</html>
--------------------------------------------------------------------------------------------------------------
BACKGROUND ATTACHMENT FIXED
--------------------------------------------------------------------------------------------------------------
<html><head><style>body{background:url("smiley.gif")no-repeat center; background-attachment:fixed;text-align:center;}</style></head><body> <p>1<p><p>2<p><p>3<p><p>4<p><p>5<p><p>6<p><p>7<p><p>8<p><p>9<p><p>10<p><p>11<p><p>12<p><p>13<p><p>14<p><p>15<p><p>16<p><p>17<p><p>18<p><p>19<p> <p>21<p><p>22<p><p>23<p><p>24<p><p>25<p><p>26<p><p>27<p><p>28<p><p>29<p> <p>30<p></body></html>
--------------------------------------------------------------------------------------------------------------
TEXT ALIGNMENT 
TEXT ALIGN LEFT: COVER LEFT HAND SIDE SPACE
TEXT ALIGN JUSTIFY: COVER LEFT AND RIGHT SPACE
TEXT ALIGN RIGHT: COVER RIGHT HAND SIDE SPACE
-------------------------------------------------------------------------------------------------------------
TEXT ALIGNMENT
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
p{
width:380px;
border:5px solid black;
text-align:center;
}
</style>
</head>
<body>
<p>
APPLE BOY CAP AVOCADO APRICOT ART ARTIST ANGLE AND ARM AID AIM AIR APE
APPLE BOY CAP AVOCADO APRICOT ART ARTIST ANGLE AND ARM AID AIM AIR APE
APPLE BOY CAP AVOCADO APRICOT ART ARTIST ANGLE AND ARM AID AIM AIR APE
APPLE BOY CAP AVOCADO APRICOT ART
</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------
TITLE CSS COLOR AND POSTION  IN HTML
READ MORE:
https://stackoverflow.com/questions/11672946/styling-an-image-title-attribute-using-css
WE ALSO USE THIS METHOD IN MEGENTO 2
.swatch-option[option-labelbefore {content:attr(option-label);}
---------------------------------------------------------------------------------------------------------------
<html>
<head>
<style>
a[titlebefore{
content:attr(;
padding-top:20px;
color:red;
position: absolute;
}
</style>
</head>
<body>
<a href="http://fo.demo.prestashop.com/en/men/1-1-hummingbird-printed-t-shirt.html#/1-size-s/8-color-white" class="color" #ffffff"><span class="sr-only">White</span></a>
</body>
</html>
---------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------
<html>
<title>DIFFERENCE .ClassA.ClassB and .ClassA .ClassB? </title>
<!-- https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-i-e-what-is-the-difference-between-c -->
<head>
<style>
.ClassA              .ClassB{
border:2px solid; 
color:red;
}
.ClassA.ClassB {
border:5px solid; 
color:Green;
}
</style>
</head>
<body>
<div class="ClassA">
<p class="ClassB">CLASS B JO KEH UNDER HAI CLASS A KAY IS KA RANG  RED HAI</p>
</div>
<p class="ClassA ClassB">asdf</p>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
POST SHARE WIDGET
FACEBOOK IMAGE ON BACKGROUND IMAGE
http://blogger-hints-and-tips.blogspot.com/
------------------------------------------------------------------------------------------------------------------
<!-- https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html -->
<style>
.RelativeBackGroundImage{
height:300px;
width:300px;
border: 1px red solid;
cursor: pointer;
/* RelativeBackGroundImage POSITION */
position: relative;
top: 0;
left: 0;
}
.AbsoluteFrontImage {
display: none;
}
.RelativeBackGroundImage:hover .AbsoluteFrontImage {
display: block;
height:60px;
width:60px;
/* AbsoluteFrontImage POSITION */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<body>
<div  class="RelativeBackGroundImage" style="background-image: url(https://www.w3schools.com/css/img_5terre.jpg);">
<a target="_blank" href="http://www.facebook.com/sharer.php?u=https://www.w3schools.com/css/img_5terre.jpg">
<div class="AbsoluteFrontImage" style="background-image: url(https://img.icons8.com/ios-glyphs/2x/facebook.png);"> 
</div>
</a>
</div>
</body>
------------------------------------------------------------------------------------------------------------------
MORE ICON  TWITTER FACEBOOK INSTAGRAM ON IMAGE 
------------------------------------------------------------------------------------------------------------------
<!-- http://vktechblog.blogspot.com/2018/07/how-to-upload-images-on-blogspot-and.html -->
<html>
<head>
<style>
.RelativeBackGroundImage{
height:300px;
width:360px;
border: 1px red solid;
cursor: pointer;
/* RelativeBackGroundImage POSITION */
position: relative;
top: 0;
left: 0;
}
.AbsoluteFrontImage {
display: none;
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.RelativeBackGroundImage:hover .AbsoluteFrontImage {
display: inline-block;
}
.nav li {
display: inline-block;
position: absolute;
}
</style>
</head>
<body>
<div  class="RelativeBackGroundImage" style="background-image: url(https://www.w3schools.com/css/img_5terre.jpg);">
<div class="nav">
<li class="AbsoluteFrontImage">
<a href="https://twitter.com/intent/tweet?url=https://html5-editor.net/">
<img alt="Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoaq92a2nQLw12YNEfeVvQ1h5g34AfC4MFqxsZtd9PQzB_WJajkJ_vsDWEvo6R-TuMk7EOpg64fyFqhWkvkbbQjl2PUk54XaXnDbfj5cgb_5T77QM17orx6lbUj6vtl2ZiXw_aX0yKwLE/s1600/twitter.png" title="Twitter">
</a>
<a target="_blank" href="http://www.facebook.com/sharer.php?u=https://www.w3schools.com/css/img_5terre.jpg">
<img alt="Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtD83_jCDerhQE6cSxjiB1bzWFrkl6E8JpVpepjuufWUCSW9mcA7L9Sg1Z1HzP_zG7cjDPkbHmTh66NRcHJL99sQoDHJdiirWQto7Ea6MkN8l0boepfEPs-aU218mwWObxK48s5EqGc3w/s1600/facebook.png" title="Facebook">
</a>
<a href="https://plus.google.com/" target="_blank">
<img alt="Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIDusoeE2aC0KJaXdlSYKTkM2zNdnOfwgHALRAFGdiPK1DonmxOCh52ijM7eMzvVWxKgpleBsZBNDeaYw0vPKyu1oq9Ma3Dv9z2pkDmFff_l1MlzAHrW0b2_LvNDew31NXjwBA_tAvks/s1600/google.png" title="Google Plus"></a>
<a href="https://instagram.com/" target="_blank">
<img alt="Instagram" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVVqR02zyNCav9d1MFPFOwxt6ZyMSRajCV07YmB41zI3rVD-qZ5LQE7hLujVKnX0ZGvq3l8TI-pZMV60nhV_Fo3EFTV-WADI3_Rtp1XqKdtJ5fYwo7DcBOhoatZ3384VVlySpwcfsOmjI/s1600/instagram.png" title="Instagram">
</a>
<a href="http://vktechblog.blogspot.com/feeds/posts/default" target="_blank">
<img alt="RSS Feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxAGFz77sW-gAtqh-KYml6wyP8Xoh4D_ZXP_tAuVRdAkjk93wttzQGFSRiTeRvNE_mxR8n3T8SQKpW4LQCO8r-F0iuI2Hgeh_sSdbTn7b8xlTfRSVMBeaA8tybR06Ci2ttUn-LRD42Ybs/s1600/rss.png" title="RSS Feed">
</a><a href="mailto:your@email.com" target="_blank">
<img alt="Email" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1CZqbENwBPvE-pjEo5DemUvqXCIgAU00a2f66jdTHh-bbG2QvRzLXcOdEUEANS69mZc0UKGbBeCnT_7oGszBQWxnXXhLsmC_tuFlbcdOTbLvb9WGcuo9Dv3JJm1JVe8R4-IWFzFllh8k/s1600/mail.png" title="Email"></a>
</li>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip_pos&stacked=h -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();   
});
</script>
--------------------------------------------------------------------------------------------------------------
NIVO SLIDER ONLY WORK WHEN YOU SAVE CODE IN HTML FILE ON COMPUTER
IT DOES NOT WORK IN CODE HTML CODE PREVIEW
READ MORE
https://www.jqueryscript.net/demo/nivo-slider/
OR USE THIS IMAGE CODE
<div id="slider" class="nivoSlider">
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" alt="" />
<a href="http://dev7studios.com">
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" alt="" title="This is an example of a caption" />
</a>
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
--------------------------------------------------------------------------------------------------------------
<html lang="en">
<head>
<title>jQuery Nivo Slider Demo</title>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/nivo-slider/demo/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="https://picsum.photos/618/246?random=1">
<img src="https://picsum.photos/618/246?random=2">
<img src="https://picsum.photos/618/246?random=3">
<img src="https://picsum.photos/618/246?random=4">
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.jqueryscript.net/demo/nivo-slider/jquery.nivo.slider.js"></script> 
<script type="text/javascript" src="https://www.jquery-az.com/jquery/scripts/jquery-1.9.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jquery-az.com/jquery/js/jquery-nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script> 
</body>
</html>
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<!-- https://www.jquery-az.com/jquery-slider-plug-in-nivo-with-4-demos/ -->
<!-- https://jsbin.com/xefaximulo/edit?html,output -->
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/.css/jquery-nivo-slider/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://www.jquery-az.com/jquery/css/jquery-nivo-slider/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="jquery-slider-demo" class="nivoSlider">
<img src="https://www.jquery-az.com/jquery/images/toystory.jpg" alt="The slide 1" />
<a href="#"><img src="https://www.jquery-az.com/jquery/images/up.jpg" alt="The slide 2" title="The caption comes here" /></a>
<img src="https://www.jquery-az.com/jquery/images/walle.jpg" alt="The slide 3" data-transition="slideInLeft" />
<img src="https://www.jquery-az.com/jquery/images/nemo.jpg"  alt="The slide 4" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>And you may use  </strong> <em>HTML</em> captions with <a href="#">links</a>. 
</div>
</div>
</div>
<script type="text/javascript" src="https://www.jquery-az.com/jquery/scripts/jquery-1.9.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jquery-az.com/jquery/js/jquery-nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#jquery-slider-demo').nivoSlider();
});
</script>
</body>
</html>

Related Post for BUTTON PADDING CHANGE HEIGHT WIDTH

  • BUTTON CHANGE INTO DROPDOWN MENU ----------------------------------------------------------------------------------------------------------------- DIV TAG DROPDOWN MENU https://www.youtube.com/watcā€¦
  • WEB IMAGE DOWNLOADER ----------------------------------------------------------------------------------------------------------------- IMAGE DOWNLOAD EXTENSIONS READ MORE: https://chrome.google.cā€¦
  • BLOCK JAVA SCRIPT BY GOOGLE CHROME -------------------------------------------------------------------------------------------------------------------------------------- java file block in google chrome hā€¦
  • IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------ā€¦
  • CSS CLICK DROPDOWN -------------------------------------------------------------------------------------------------------------- CODE 1: http://koen.kivits.com/articles/pure-css-menu/ ---------ā€¦
  • HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_Uā€¦
  • CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------ā€¦
  • MOUSE COORDINATES IN JAVA SCRIPT -------------------------------------------------------------------------------------------------------------- mouse coordinates finder on website https://chrome.google.com/webā€¦
  • BUTTON PADDING CHANGE HEIGHT WIDTH ------------------------------------------------------------------------------------------------------------ PADDING BUTTON CHANGE INTO WIDTH AND HEIGHTEMOJI SITEShttps://yayteā€¦
  • NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://ā€¦
  • IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nbā€¦
  • RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD  </head> TAG AND PASTE BELOW CODE WHEN Wā€¦
  • ARROW BUTTON ------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ---------------------------------------------ā€¦
  • DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogspā€¦
  • SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More:  3:30 PDF HTML IMAGE CONVERTER HDā€¦
  • TEXT COMPARE OR DUPLI TEXT FINDER ------------------------------------------------------------------------------------------------------------------ READ MORE: FIND RED TEXT IN GOOGLE:  text compare downlā€¦
  • NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CTā€¦
Posted by on Monday, 1 November 2021 at 16:26
Labels: , , ,

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets