🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
How to create a button in Adobe Dreamweaver CC.
Questions
Student Gallery
Be the first to share something.
Course info
Overview
We’ll use Dreamweaver's handy templating tools to make updates to our site super easy. We’ll create our very own mobile 'burger menu' from scratch learning some basic Javascript & jQuery.
Now web design can sometimes be tricky so I am here to help - just message me if you get stuck. There are also exercise files so you can follow along. I even save a full copy of the website at the end of every video so that you can check yours again mine if you’re is not working quite right.
- You will need a copy of Adobe Dreamweaver CC 2017 or above. A free trial can be downloaded from Adobe.
- No previous web design skills are needed.
- No previous Dreamweaver skills are needed.
What am I going to get from this course?
- 39 lectures 3+ hours of well-structured content!
- You'll learn to build a responsive portfolio website from scratch.
- Learn how to take a design from Illustrator & create a professional website.
- How to use templates in Dreamweaver.
- Create mobile, tablet & desktop versions of the website.
- Build our own custom responsive navigation with burger menu.
- Introduction to Javascript & jQuery.
- How to publish your website to the internet.
- Ways to preview your designs straight to your mobile device.
- How to get the most from your portfolio Images.
- How to use beautiful web fonts in your designs.
- You will get the finished files so you never fall behind.
- Downloadable exercise files & cheat sheet.
- Forum support from me and the rest of the BYOL crew.
- All the techniques used by professional website designers.
What is the target audience?
- YES: This course is for beginners. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary.
- NO: This course is NOT suited to people experienced in using HTML & CSS.
Course duration approx 4 hours + your study.
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Downloads & Exercise files
Transcript
Hi there, in this tutorial we're going to make this Red Button. We're going to do cool things where we borrow existing CSS from other Classes and we re-use some Classes, get more fancy. All right, let's go and do that now.
So first thing is, let's put in a Button. Now I want it to be just after this Horizontal Rule, so click on that. There's no Insert button. It's just the Hyperlink that we Style with some Paddings and Background colors that look like a button. The Button is this guy here. It's a lot like this one at the top here that we used for our Nav. So we're going to actually borrow CSS from that to save some time. So, Horizontal Rule, selected up here in my Live view. I'm going to go to 'Insert', 'Hyperlink'. It's going to say 'After'. And then I'm going to call this one 'Let's Talk'. Cool, linking, remember, we don't have the name for the page yet, so we're just going to use hash '#'. 'Target', I want it to be Self, so we'll leave it blank, puts itself as the default. And the Title, this is good for Search Engines. It sees this button, and 'Let's Talk' is not particularly useful to know what's happening, so we give it some more information.
We'll make sure it's keyword friendly. So this is going to be 'Daniel Walter Scott' because I'm going to be the UX/UI Designer that I'm trying to rank for, in Google. 'Contact Us'. Why is it all capitals? Because I left the Caps lock on. It should probably just be title case, but I'm okay with that. Nobody sees that in the background, but the Search Engines. Now we're going to go and Style it. And the cool thing about it is that, we, if you remember, made a Class called Red Button and Green Button. So we need to release that, so, we get to styles a-tag. This is where we get to start reusing things. And this is nice when you get to that point in the website and you're like, "Lot of the hard work's done, we get to start reusing things instead of always trying to create new Classes."
So now we get to go dot '.' and this one, remember, we called it ‘btn’ at the beginning, to make it easy to find. Button Red, cool. So it's got a red background. Now that Button Red didn’t come along with all the Padding. We did that separately, if you remember. So I want to steal the CSS from this button. Now, we can't do it here in Index Page because it's part of the Template, and it just doesn't let you. If I click on it, go to 'CSS Designer' panel - I'm going to turn all that off. - click on this, and it just doesn't really work. So we have to go open the 'Template'. And in here, I'm going to switch to 'Current'. Remember, Current allows me to click on something and it actually gives me the Classes that might be applied, and it happens to be this top one. I know, because if I click 'Show Set', it's going to show me the things that are applied to that particular Class, not everything. And we can see the Padding, the Text Color, and moving the Underline. So that's all the stuff we need.
There's a cool feature, we can right click this and say, 'Copy All Styles'. There is an option in here also that says just the Text Styles, just allow it depending on what you want, but I want All Styles. Thank you, Template. Now I'm going to apply it to this. Now I could go into here, and create another Class. And Style it with this. I'm going to be a little bit more resourceful, and use a Compound Selector. So what I'm going to say is, if there's a Red Button inside this Hero Box then apply this Text. So, maybe go from 'Current' to 'All'. 'Styles', 'Global', make a 'Selector'. It's picked bits of it. So, what do I want? You'll notice it hasn't put in the a-tag. It's just put in button-red, and hero-content, but not the a-tag. Let's just check if it works, sometimes they do, sometimes they don't.
So with it selected, I'm going to right click it, and say 'Paste Styles'. Hey, magic. So it is working. So now it's time to put some space between this Horizontal Rule because it's butted up next to it. So I would like you to go for the Pause button now. Hit 'Pause', and I want you to think of how you do it. You can go and try. Go "Okay, this is what I do," and see if you can give it a go. You can undo if it doesn't work. 'Edit', 'Undo'. And you can watch the rest of this video but come down here, wherever it is, 'Pause'. Pause is the button, and have a think. Go now. You're not pausing, are you?
What I would do, there's actually a couple of things you could do. We could do this Class here, put some Margin at the top. Or we could use this Horizontal Rule here. I'm remembering the Horizontal Rule mainly because I'm looking at it to go-- actually I want to do the space between there, and underneath. Instead of trying to do them separately I might as well just do the Horizontal Rule here. Go to 'Current'. There's my 'hr', I'm going to turn off 'Show Set'. So I see them all, and I'm going to go to 'Layout'. And I want to add-- I want to maybe minus the Margin off the top. I'm just clicking, holding, and dragging. And put a load at the bottom there. Either way would have worked, that Compound Class that we used, you could have created a new Class that did spacing, that be kind of weird, but it would work. But what I did was I did the Horizontal Rule to play with both sides.
All right, cool. Let's 'Save All' and get on to the next tutorial.
How do you create a button in Dreamweaver using existing CSS?
Create a hyperlink, then style it to look like a button using a background colour, padding and text styling. In Dreamweaver, you can reuse an existing button class and copy styles from another selector, then apply them specifically to the new link inside your hero content.
Creating a Button in Dreamweaver by Reusing CSS Styles
Key Takeaways
Turn a simple hyperlink into a red contact button.
Reuse existing CSS classes instead of rebuilding styles.
Copy button styling from a navigation link in a template.
Limit the new styling to buttons inside the hero area.
Adjust horizontal rule margins to give the button some breathing room.
There is a nice point in building a website where a lot of the hard work is already done. Instead of creating another class for every new element, you can start borrowing what you have already built.
That is exactly what we need for a red Let’s Talk button beneath the horizontal rule in a portfolio’s hero area. The navigation already has button styling, and the stylesheet already has red and green button classes. We can put those pieces to work.
1. Insert a Hyperlink After the Horizontal Rule
For this contact call to action, the button is really a hyperlink with CSS styling. The background colour and padding give it the appearance of a button, while the link provides the destination.
Start by selecting the horizontal rule in Dreamweaver’s Live View. That gives Dreamweaver a clear reference point for inserting the new element.
Choose Insert > Hyperlink.
Set the insertion position to After.
Enter Let’s Talk as the link text.
Use # as a temporary link destination if the contact page name has not been decided yet.
Leave the target field blank to use the default behaviour of opening in the same browsing context.
Add a descriptive title, then confirm the insertion.
Insert the contact link first, then give it its button styling.
The visible label is deliberately short and conversational. The title field can provide more context about the link’s purpose. For this portfolio, that context includes Daniel Walter Scott, UI and UX design, and contacting the designer.
Keep that description readable and relevant. Title case is perfectly fine; there is no need to write it all in capitals. The title is separate from the visible button label.
2. Apply the Existing Red Button Class
Select the new hyperlink and use its class control to apply the existing red button class. The button classes were named with a BTN prefix, which makes them easier to find when choosing a class.
Cool, the link now has a red background. But it does not yet have all the padding and text styling that make the navigation links look like proper buttons.
That is because those styles were defined separately. The red button class supplies the colour; another selector supplies the spacing and link appearance.
Reusing a class means reusing the properties it actually contains. It does not automatically bring along every style associated with a similar-looking element elsewhere on the page.
3. Copy the Navigation Button’s Styles from the Template
The navigation button already has the missing pieces: padding, text colour and no underline. Rather than entering those properties again, we can copy them.
There is one small catch. In this project, the navigation belongs to a template, so selecting it on the index page does not let us work with it in the way we need. Open the template itself first.
Select the existing navigation button in the template.
Open the CSS Designer panel.
Switch to Current to see the selectors associated with the selected element.
Select the rule that contains the button’s padding and text styling.
Enable Show Set to display only the properties already set for that rule.
Right-click the selector and choose Copy All Styles.
Current mode helps narrow down the relevant selectors. Show Set then makes it easier to check that you have the right one, rather than searching through every possible CSS property.
Dreamweaver also offers options for copying only certain groups of properties, such as text or layout styles. Here, we want all the styles from the chosen rule, so Copy All Styles is the useful option.
4. Apply the Copied Styles Only Inside the Hero Area
Return to the index page and select the new contact link. We could create another class and paste the styles into it, but there is another approach: create a selector that targets the existing red button class specifically inside the hero content.
The idea is simple: if a red button is inside the hero content, apply these additional styles.
This keeps the reusable red background class intact while giving the hero button the padding and text treatment it needs.
With the new link selected, switch CSS Designer from Current to All if necessary.
Select the stylesheet and the Global context.
Add a selector that combines the hero content context with the red button class.
Check the selector Dreamweaver suggests before accepting it.
Right-click the new selector and choose Paste Styles.
Dreamweaver’s suggested selector includes the hero content and red button classes, but it does not include the anchor tag. That is not automatically a problem. A class-based selector can still match the hyperlink without explicitly naming its tag.
The important check is the result in Live View. After pasting, the link should pick up the padding, text colour and removal of the underline. Now it looks like a button rather than a small red patch behind some text.
The copied styles give the contact link its button shape, but the spacing still needs attention.
5. Add Space Around the Horizontal Rule
The button is styled, but it sits right up against the horizontal rule. Before changing anything, think about which element should control that gap.
There are a few workable options:
Add a top margin through the new hero button selector.
Adjust the horizontal rule’s margins.
Create a separate spacing class, although that is unnecessary for this small adjustment.
I would use the horizontal rule here because I want to adjust the space both above and below it. That lets us handle both sides in one place rather than making separate changes to the surrounding elements.
Select the horizontal rule in Live View.
Switch CSS Designer to Current.
Select the relevant horizontal rule selector.
Turn off Show Set so unset properties are available too.
Open the Layout properties.
Adjust the top margin to reduce the space above the rule, then increase the bottom margin to separate it from the button.
You can click, hold and drag the margin controls while checking the layout. The goal is a comfortable gap, not a particular number. If an experiment does not work, use Edit > Undo and try again.
Adjusting the rule’s margins gives the contact button some breathing room.
Adding space through the button selector would also work. The horizontal rule is simply the more convenient choice when both its upper and lower spacing need attention.
Finish with Save All. You now have a red contact button built from existing styles, with a contextual selector for its hero styling and margins that keep the layout from feeling cramped.
Key Terms
Hyperlink
A clickable link to a destination. In this example, CSS makes the hyperlink look like a button.
CSS class
A reusable styling hook applied to an HTML element. The existing red button class supplies the new link’s background colour.
Contextual selector
A selector that targets an element based on where it sits in the page. Here, it applies additional styling to a red button inside the hero content.
Padding
Space inside an element, between its content and its edge. Padding gives the link a larger button shape around its text.
Margin
Space outside an element. Adjusting the horizontal rule’s margins changes the gaps above and below it.
Show Set
A CSS Designer filter that displays only properties already set for the selected rule. Turn it off when you need access to properties that have not yet been defined.
FAQs
Why does the red button class only change the background?
The colour and the other button properties were defined separately. Apply the red class for the background, then copy the padding and text styling from the existing navigation rule into a selector for the hero button.
Why do I need to open the template to copy navigation styles?
In this project, the navigation is part of the template rather than an editable part of the index page. Opening the template lets you select the navigation button and inspect the relevant rule in CSS Designer.
Does the selector need to include the anchor tag?
Not necessarily. A selector based on the hero content and red button classes can match the link without naming the anchor tag. Check Live View to confirm that the pasted styles apply to the intended element.
Should I add margin to the button or the horizontal rule?
Either can work. Adjust the horizontal rule when you want to control spacing on both sides of it; use the button selector when only the button’s spacing needs changing.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
