I'm Creating a button that links to Youtube, and the text inside the button doesn't respond to css code
I tried this html code:
<button class = "button"><a href = https://www.youtube.com>This is a button to youtube</a></button>
and this css:
.button {
width:100px;
height:100px;
border-radius:12px;
font-family: arial;
color: black;
font-size:15px;
text-decoration: none;
background-color:red;
border-left: solid transparent;
border-right: solid transparent;
border-top: solid transparent;
border-bottom: solid transparent;
position:relative;
top:10px;
}
you dont need to use the button tag if you use a tag
This is a button to youtube
When applying your text styles, you have to select your a element, not your button element:
.button {
width: 100px;
height: 100px;
border-radius: 12px;
background-color: red;
border-left: solid transparent;
border-right: solid transparent;
border-top: solid transparent;
border-bottom: solid transparent;
position: relative;
top: 10px;
}
.button > a {
font-family: arial;
color: black;
font-size: 15px;
text-decoration: none;
}
<button class="button"><a href = https://www.youtube.com>This is a button to youtube</a></button>
Use a tag, the browser has some default behavior. If you don't like, you can use JavaScript to navigator to youtube
<button class = "button" onclick="window.open('https://www.youtube.com', '_blank')">This is a button to youtube</button>
Related
I have this button which doesn't highlight properly when I click on it, please see the image, and CSS file down below
CSS for the toggle button:
.mat-button-toggle {
box-sizing: border-box;
height: 33px;
width: 159px;
border: 1px solid #E1E1E1;
border-radius: 2px;
background-color: #FFFFFF;
}
.mat-button-toggle:hover {
border: 1px #000 solid !important;
background-color: #FFF !important;
border-radius: 5px !important;
}
CSS for the text
.ticket {
margin-top: 5px;;
height: 18px;
width: 122px;
color: #111111;
font-family: Arial;
font-size: 16px;
letter-spacing: 0;
line-height: 18px;
}
HTML
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" >
<mat-button-toggle routerLink="ticketView" value="ticketView">
<div class="ticket" id="p1">
{{'TicketOverView' | translate}}
</div>
</mat-button-toggle>
My guess is there is something else in your css html going on. I have recreated your css in codepen for you and couldn't reproduce your results.
I would double check your html markup.
Here is the codepen I produced
https://codepen.io/jmllr89/pen/KKdzLGw
Also you do not need !important on the :hover pseudo-class. CSS is smart enough to recognize what needs to be changed. So simply define your initial state in mat-button-toggle and then in mat-button-toggle:hover you create a second state, and css will make the necessary changes.
.mat-button-toggle {
height: 33px;
width: 159px;
border: 1px solid #E1E1E1;
border-radius: 2px;
background-color: #FFFFFF;
}
.mat-button-toggle:hover {
border-color: #000;
border-radius: 5px;
}
I'm trying to align a triangle next to written text in a button using only HTML and CSS. For the life of me, I can remember how.
.room-info-btn {
background-color: #FFA500;
color: #fff;
border-radius: 4px;
padding: 5px 11px;
font-size: 20px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}
<li>
<button class="room-info-btn" id="room-info-btn">
<div class="arrow-down"></div>
Rooms / Availability
</button>
</li>
I highly recommend checking out Flexbox.
For your code, you can simply add the following css to your .room-info-btn selector:
display: flex;
align-items: center;
This makes aligning many items very simple and gives you other flex control options.
Try this. Flexbox is a better choice I guess.
Take a look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.room-info-btn {
background-color: #FFA500;
color: #fff;
border-radius: 4px;
padding: 5px 11px;
font-size: 20px;
display: flex;
align-items:center;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}
<li>
<button class="room-info-btn" id="room-info-btn">
<div class="arrow-down"></div>
Rooms / Availability
</button>
</li>
Try display: inline-table; in arrow-down class to align with the text
I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result.
Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).
If it's repeated question please add the solution link.
Thanks in advance.
I have tried this:
div {
border-bottom: 1px ridge #B5B9BB;
/*border-bottom: 1px inset #B5B9BB;
border-bottom: 1px outset #B5B9BB;
border-bottom: 1px groove #B5B9BB; */
}
You could use outline:
.bordered {
border-bottom: 1px solid grey;
background: aliceblue;
outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>
Demo
Seems why not just use a border on the text?
div {
background: lightgrey;
padding: 0.5em;
}
p {
border-bottom: 1px ridge #B5B9BB;
}
<div>
<p>Available Apps</p>
</div>
It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)
For example:
<div class="headline-area">
<h2>Available Apps</h2>
</div>
with the CSS:
.headline-area {
background:#D4D9DC;
padding:5px;
}
.headline-area h2 {
border-bottom:1px solid #B5B9BB;
}
Whenever I am in your situation I use box-shadow:
body {
background:#D1D6D9;
font-family:verdana;
}
div {
border-bottom: 1px solid #B5B9BB;
box-shadow:0 1px 1px rgba(255,255,255,.7);
padding-bottom:5px;
}
<div>Available Apps</div>
You could always try a hr tag. You can then style it in CSS to your desired preference.
HTML
New apps
<hr>
Try this Also but you need an extra Div to do so.
HTML
<div class="outerDiv">
COntent
<div class="innerDiV">
</div>
<div>
CSS
.outerDiv{
background-color: grey;
height: 32px;
text-align: center;
padding: 16px;
font-weight: bolder;
font-size: 25px;
}
.innerDiV{
margin: 0 auto;
border: 1px solid black;
width: 98%;
margin-top: 10px;
}
Demo
Nobel Prize to anyone who can help me out with this.
I need to create the following style:
Constraints: Can only use CSS. That field is generated as an h3 tag by the content management system. Cannot write HTML to place it inside a wrapper. Would prefer not to use a background image since the client has not given me one. Cannot to resort to JavaScript because this style needs to apply to multiple pages and I don't have a global JavaScript file in the environment I'm using.
Here's a fiddle: http://jsfiddle.net/d7qrLLug/
You can achieve this using css borders:
JS Fiddle
h3 {
color: #FFF;
text-transform: uppercase;
background-color: #423025;
padding: 5px;
border-top: 1px solid white;
border-bottom: 1px solid white;
border-style: double;
border-width:4px;
border-left: none;
border-left: none;
}
You can achieve this using before and after pseudo elements.
h3:before, h3:after {
border-top: solid 1px white;
content: "";
display: block;
}
See this jsfiddle:
http://jsfiddle.net/d7qrLLug/5/
That's actually very simple:
Demo: http://jsfiddle.net/d7qrLLug/11/
h3 {
color: #FFF;
text-transform: uppercase;
background-color: #423025;
padding: 5px;
position:relative;
}
h3:before {
position:absolute;
top: 3px;
display:block;
width:100%;
content:" ";
border-top: 1px solid #fff;
}
h3:after {
position:absolute;
bottom: 3px;
display:block;
width:100%;
content:" ";
border-top: 1px solid #fff;
}
Note: You need absolute positioning on :before and :after to not change the original height of the produced h3 element, if that isn't important, this will do the job:
Demo http://jsfiddle.net/d7qrLLug/12/
h3:before,
h3:after {
display:block;
width:100%;
content:"";
border-top: 1px solid #fff;
}
HTML
<div class="wrapper">
<a href="#">
Link-1
<span class="sub-list hidden">
SubLink-1
SubLink-2
SubLink-3
</span>
</a>
Link-2
Link-3
</div>
CSS
.wrapper {
border-bottom: 1px solid #dfdfdf;
padding-bottom: 5px;
padding-right: 50px;
height: 25px;
}
.wrapper > a {
font-size: 13px;
font-weight: bold;
padding: 5px 6px;
border: 1px solid #ffffff;
border-bottom: none;
float: right;
display: block;
}
.sub-list {
background-color:#ffffff;
width: 251px;
height: 40px;
border-right: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
padding: 10px 10px 0 0;
text-align: right;
}
http://jsfiddle.net/6vAQF/1/
I want to create a menu and submenu. But when I place submenu under the a tag with a span wrapper, dom treeview appears corrupted as below image;
Why is that?
You're nesting links within a link, which is forbidden:
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Creating anchor tag inside anchor tag